使用 React 在数组内映射数组答案

【问题标题】：Mapping array inside array with React使用 React 在数组内映射数组
【发布时间】：2020-10-01 12:11:34
【问题描述】：

我在 MongoDB 中有一个数据库，文档中的一个道具包含一个数组。我正在尝试使用此代码使用 React 在客户端映射集合：

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>{recipe.category}<br/> 
                {recipe.ingredients}<br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

ingredients prop 是一个数组，我也想映射它。我该怎么做？任何帮助都会很棒，谢谢！

【问题讨论】：

数据是什么样的？对recipe.ingerdients 包含的内容特别感兴趣。
我猜把recipe.ingredients改成{recipe.ingredients.map((ingredient) => (<p>{ingredient}</p>))}
您好，如果您包含该模块中您遇到问题的所有代码会更好

标签： javascript reactjs jsx

【解决方案1】：

只需按照与食谱相同的方式进行映射

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>
                {recipe.category}<br/> 
                {recipe.ingredients.map(ingredient => (
                   <span>{ingredient}</span>
                ))}
                <br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

【讨论】：

谢谢！这正是我所需要的！我将在 span 标签中添加成分应由 { } 包围

【解决方案2】：

重新映射一下

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>
                {recipe.category}<br/> 
                {recipe.ingredients.map(k =>(
                   <span key={k._id}>{k}<span>
                 )<br/>
                {recipe.preparation}
            </li>
        )}
    </ul>
</div>

【讨论】：

【解决方案3】：

<div>
    <h2>Recipes</h2>
    <ul>
        {this.state.recipes.map(recipe =>
            <li key={recipe._id}>
                {recipe.title}<br/>{recipe.category}<br/> 
                 {  recipe.ingredients.map(ingredient => 
                    <span>{ingredient}</span>
                  )}                 
                <br/>{recipe.preparation}
            </li>
        )}
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

我认为forEach 没有返回任何东西，所以它不会渲染？

【解决方案4】：

您也可以通过调用recipe.ingredients.map() 来使用.map()，如下所示：

{this.state.recipes.map(recipe =>
    <li key={recipe._id}>
        {recipe.title}<br/>{recipe.category}<br/> 
        {
           recipe.ingredients.map((elem, index) => 
             <div key={index}>
                {elem /* or maybe elem['your-property-name'] if it's not a string */}
             </div>
           )
        }<br/>{recipe.preparation}
    </li>
)}

另外不要忘记在此处添加key={index} 以避免基于Lists and Keys 的警告。

【讨论】：

您应该添加索引作为键以避免警告，您应该添加唯一键以避免用户界面上的错误。如果你不放键，React 会自动使用索引作为键。如果成分是一组成分，他应该使用 key={elem}。如果不是，他应该使用唯一的密钥。