javascript - 使用 React 在数组内映射数组

Question

我在 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>

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

标签： javascriptreactjsjsx

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