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

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



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

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

我得到了十个项目符号的结果，但未显示该文本。如果我尝试Ingredient.text，它说不能显示null的文本。

提前致谢。

最佳答案

您在这里设置带有道具的道具。

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>