在 reactJs 中使用 map 显示对象数组

Posted 2023-02-22

【中文标题】在 reactJs 中使用 map 显示对象数组

【英文标题】：Displaying array of objects using map in reactJs

【发布时间】：2019-01-22 04:35:37

【问题描述】：

我有 10 个这样的对象数组：

我尝试映射ingedients 并显示文本：

    <ul>
        this.props.data.ingredients.map(function(ingredient,i)  
        return (<li key=i item=ingredient/>)
        )
   </ul>

我得到十个项目符号的结果，但没有显示文本。如果我尝试 ingredients.text ，它会说无法显示 null 文本。

提前致谢。

【参考方案1】：

你在这里用成分设置物品道具。

return (<li key=i item=ingredient/>)

您可能希望在li 中显示文本，如下所示：

<ul>
    this.props.data.ingredients.map(function(ingredient,i)  
        return (<li key=i item=ingredient>ingredient.text</li>
    )
</ul>

【讨论】：

谢谢。试了一下，我得到一个错误 TypeError: Cannot read property 'text' of null.The value is a String

我做了一个代码沙箱，它可以工作。看看codesandbox.io/s/j7w9mrokyw

谢谢，效果很好。这是我最后犯的一个简单的错误。

【参考方案2】：

你也可以用 ES6 的方式做同样的事情

let ingredientsText = [];

this.props.data.ingredients.map((ingredient,i) =>  
   ingredientsText.push(<li key=i item=ingredient>ingredient.text</li>);
)

<ul>
    ingredientsText
</ul>