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

Question

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

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

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

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

谢谢。

Answer 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>

Answer 2

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

let ingredientsText = [];

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

<ul>
    {ingredientsText}
</ul>