如何在未定义映射的情况下在react中显示不同的数组值？

Question

这是原始数据：

const myArray = [
  'id': 'stuff', 'location': 'stuff2', 
  'phone_numbers'['stuff3','stuff4'], "address" : 'stuff5'
]


// so far, I'm getting the correct values back in an array from an API.
console.log(myReturnedArray) = [
{
"id": "10001",
"brand": "Best Brand",
"center_name": "Best Brand Texas",
"status": "Active",
"emails": [
  {
    "CreateDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "emailAddress": "test@test.com",
    "firstName": "Test",
    "lastName": "Tester",
    "id": "0eac8839-6e61-42f5-b55f-e2fa17b0262b",
    "licenseType": "Unlimited",
    "updateDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "userType": "STORE"
  }
],
"licenses": [
  {
    "CreateDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "licenseType": "STORE",
    "status": "ASSIGNED",
    "updatedBy": "SYSTEM",
    "updateDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "renewDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "expirationDate": "October 12, 2022 at 10:59:09 AM UTC-5",
    "id": "0eac8839-6e61-42f5-b55f-e2fa17b0262b"
   }
  ]
 }
]

*每当我尝试一个map函数时，我都会得到一个错误：“对象作为React子对象无效(找到:带有键{id、品牌、center_name、状态、电子邮件、许可证}的对象)。如果您打算呈现一个子集合，请使用数组代替。”

我希望在div或span中显示返回数组中的每个值，但我总是会收到错误，比如无法获得未定义的读取映射的属性，或者每次尝试时都会出现唯一的键错误。

// I would like to have each value from the object inside of myReturnedArray to use in my return statement.
return (
    <span>your email is : "test@test.com", </span>
    <div> your first name is : "Test" </div>
    <span> your last name is : "lastName": "Tester", </span>
);

每当我在返回语句中尝试使用这样的map函数时：

{ myReturnedArray.map(item => <div>{item.name}</div>) } 

它返回myReturnedArray is undefined。但当我这么做的时候

{ JSON.stringify(myReturnedArray) }

它正确地将returnedArray呈现为字符串。所以我知道返回方法可以访问数组；我只是不能显示它。

Answer 1

数组项中没有name属性。下面是正确显示其内容的数据代码示例：

https://codesandbox.io/s/vigorous-euclid-nzbcp0?file=/src/App.js:24-283

Answer 2

最终解决方案：codeSandbox

对你所犯错误的解释：

1:您更新的数据结构非常复杂，嵌套在数组中的对象和该对象内部的数组等等。因此，它当然会抛出一个错误--“对象作为React子对象无效”。

不能将整个对象放置在div标记之间，需要逐个映射该对象字段，以便在每个div之间具有单个值。

2:关于“唯一键”问题的--这是一个警告，而不是错误。当您将对象项映射到元素而不向每个项添加key属性时，它总是显示此警告。

因此，为了消除这个警告，只需将key属性添加到在map函数中返回的div，然后选择一个uniqe键。

你怎么能像这样绘制地图？

据我所知，您拥有的结构是一个大数组-- myReturnedArray，在这个数组中，当每个数组包含以下内容时，您将拥有许多对象(现在只有一个)：

• 包含对象的emails 数组。
• 包含对象的licenes 数组。
• 其他一些key:value对。

为了正确地映射myReturnedArray --您需要一个ForEach循环来映射其中的每个大对象，然后一起返回所有映射的对象。

首先，我创建了一个帮助函数，该函数将对象数组(没有嵌套数组的或)映射到HTMLdiv标记。

我将使用这个函数来映射emails和licenes数组。

帮助者功能：

  const mapArrayOfObjects = (array) => {
    const arrayAsDivs = array.map((obj, index) => {
      const mappedObj = Object.entries(obj).map(([key, value]) => {
        return <div key={key}>{key + ' : ' + value}</div>;
      });
      return (
        //Returns a div with one object of the array and space after it.
        <div key={'nestedObj' + index}>
          {mappedObj}
          <br />
        </div>
      );
    });
    return arrayAsDivs; //The function returns ALL the mapped objects in the array.
  };

它看起来很复杂，但它所做的只是遍历数组，并将每个对象映射到一个大的div标记，并将所有的key:value对映射为嵌套的div。(我添加了br，以便在对象之间有一些空间。(在您的示例中，emails__中只有一个对象，但我假设会有更多对象。)

使用forEach

在这个函数中，我映射了myReturnedArray中的所有大对象

const allObjectsHTML = [];

  myReturnedArray.forEach((obj) => {
    const emailsAsDivs = mapArrayOfObjects(obj.emails);
    const licensesAsDivs = mapArrayOfObjects(obj.licenses);
    const otherFields = Object.entries(obj).map(([key, value]) => {
      if (!Array.isArray(value)) {
        return <div key={key}>{key + " : " + value}</div>;
      }
    });
    const objectAsHTML = (
      <div>
        <div>{otherFields}</div>
        <div>
          <h3>Emails:</h3>
          {emailsAsDivs}
        </div>
        <div>
          <h3>Licenses:</h3>
          {licensesAsDivs}
        </div>
      </div>
    );
    allObjectsHTML.push(objectAsHTML);
  });

此函数在每次迭代中所做的工作：

• 使用助手函数映射emails，licenses数组。
• 映射对象中的其余key:value对。
• 将映射的对象推送到allObjectsHTML数组，该数组将包含、all、、映射对象。

最后一步

现在，您需要做的就是在您的JSX代码中返回：

 return (
    <>
      {allObjectsHTML.map((obj,index) => (
        <div key={"bigObj"+index}>{obj}<hr/></div>
      ))}
    </>
  );

这将返回allObjectsHTML的映射版本。

这是我的代码的codeSandbox。

如果您想检查它是否在数组中的许多对象上工作：二次codeSandbox。

注意：，如果您确实知道在myReturnedArray中只有一个对象，那么就不需要使用forEach。看这个代码。

Answer 3

数据的初始格式有缺陷，不是JS语法。要正确地完成它，首先必须使它成为一个适当的数据容器。对于这种不需要数组的任务，您有一个对象。

  const data = {
    id: 'stuff',
    location: 'stuff2', 
    address: 'stuff5',
    phone_numbers: ['stuff3','stuff4']
  }

然后，在返回部分中，您可以这样做：

const {id, location:dataLoc, address, phone_numbers:phNums} = data
const [num1, num2] = phNums

return (
    <div>{dataLoc}</div>
    <span>{address}</span>
    //etc
)

我还对yopur代码进行了一些修改，以满足JS命名约定。我们在这里使用camelCase，所以没有phone_numbers (snake_case是Py)，而是phNum。