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

【问题标题】：Displaying array of objects using map in reactJs在 reactJs 中使用 map 显示对象数组
【发布时间】：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 文本。

提前致谢。

【问题讨论】：

标签： arrays reactjs ecmascript-6 mapping

【解决方案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>

【讨论】：