开发者问题收集

映射数组会给我一些未定义的数组，因为它们是空的

2020-12-02
448
javascript reactjs map-function

我正在使用 map 函数循环遍历对象，并且我想访问对象内部名为“text”的数组的属性。但是有些数组是空的，所以 text 属性未定义。因此，计算机向我抛出一个错误。我收到此错误

'TypeError: Cannot read property 'text' of undefined'

我的方法是使用迭代运算符在对循环的每个特定对象执行之前检查 item.myStocks[0].text 是否存在。但它不起作用，我正在使用 react。 

{this.state.filteredUsers.map((item)=>(
     <Table.Row  >
         <Table.Cell > <p style={{color:'black'}}> {item.myStocks[0].text? item.myStock[0].text : 'array has no texts... '} </p></Table.Cell>
         <Table.Cell> <p>datecreated </p>  </Table.Cell>
     </Table.Row>
     <Table.Row  >
        <Table.Cell > <p style={{color:'black'}}> text</p></Table.Cell>
        <Table.Cell> <p> datecreated</p>  </Table.Cell>
     </Table.Row>

这是一个映射对象的示例。我正在尝试访问“mystocks”每个对象数组的第一个文本 

{dateCreated: "2020-12-02T03:58:44.560Z", myUploads: Array(0), myStocks: Array(3), _id: "5fc727e84297219a0c59b408", email: "[email protected]", …}
{dateCreated: "2020-12-02T03:58:44.560Z", myUploads: Array(0), myStocks: Array(2), _id: "5fc730104297219a0c59b40d", email: "[email protected]", …}
{dateCreated: "2020-12-02T03:58:44.560Z", myUploads: Array(0), myStocks: Array(0), _id: "5fc730ea4297219a0c59b412", email: "[email protected]", …}
3个回答

尝试使用可选链来验证 myStocks[0] 是否存在以及文本字段 

item.myStocks[0]?.text ? item.myStock[0].text : 'array has no texts... '

在您的代码中，问题在于您无法接近不存在对象的文本字段，因此您需要首先验证它是否存在。 如果没有可选链，它将看起来像 

(item.myStocks[0] && item.myStocks[0].text) ? item.myStock[0].text : 'array has no texts... '
Hadas
2020-12-02

为了检查 item.myStocks 处的数组是否为空，您可以检查三元组中的 length 。如果它大于零，您可以访问第一个元素 item.myStocks[0]

也许您需要检查 item.myStocks[0] 是否也具有 text 属性。如果需要，将此三元嵌套在第一个三元组中。

item.myStocks[0].text ? item.myStocks[0].text : 'has no text property' 

{this.state.filteredUsers.map((item)=>(


<Table.Row>
      <Table.Cell > <p style={{color:'black'}}> {item.myStocks.length > 0 ? item.myStock[0].text : 'myStocks array is empty...'} </p></Table.Cell>
     <Table.Cell> <p>datecreated </p>  </Table.Cell>
    

     </Table.Row>
     <Table.Row  >
      <Table.Cell > <p style={{color:'black'}}> text</p></Table.Cell>
     <Table.Cell> <p> datecreated</p>  </Table.Cell>
</Table.Row>
ckoala
2020-12-02

我找到了一个解决方案。语法有点棘手。我很感激你的帮助。 

{ item.myStocks.length? item.myStocks[0].text : 'no text'}
F Alem
2020-12-02