React中如何用.map()渲染嵌套数组并获取recipeName？

问题分析 #

你的代码已经在遍历recipes数组，但只渲染了recipeSize，没有输出recipeName；另外多个<a>标签连续使用会导致内容无分隔，视觉上容易误以为没渲染。同时要确保模拟数据正确传递给了组件。

修正方案 #

1. 确保数据正确传递

在父组件中把模拟的recipe数组作为diets属性传给DietList：

function App() {
  const recipe = [
    {
      category: 'Keto',
      name: 'Chicken Bistek',
      calories: '500',
      description: '',
      recipes: [
        { recipeName: 'Chicken', recipeSize: '3 lbs' },
        { recipeName: 'Garlic', recipeSize: '4 cloves' },
        { recipeName: 'Onion', recipeSize: '1 whole' },
        { recipeName: 'Soy Sauce', recipeSize: '1/4 cup' },
        { recipeName: 'Coconut Oil', recipeSize: '1 tbsp' },
        { recipeName: 'Water', recipeSize: '1 cup' },
      ],
    },
  ];

  return <DietList diets={recipe} />;
}

2. 修正DietList组件

改用语义化标签展示内容，同时渲染recipeName和recipeSize：

const DietList = (props) => {
  return (
    <>
      {props.diets.map((diet) => (
        <div key={diet.name} style={{ margin: '1rem 0', padding: '1rem', border: '1px solid #eee' }}>
          <h3>{diet.name}</h3>
          <p>分类：{diet.category}</p>
          <h4>食材清单：</h4>
          <ul>
            {/* 使用可选链操作符防止recipes不存在时报错 */}
            {diet.recipes?.map((recipeItem) => (
              <li key={recipeItem.recipeName}>
                {recipeItem.recipeName} - {recipeItem.recipeSize}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </>
  );
};

关键改进点 #

• 替换<a>标签为语义化的标题、段落和列表，避免链接标签的语义混淆，同时让内容结构更清晰
• 在recipes的遍历中同时渲染recipeName和recipeSize，完整展示食材信息
• 添加diet.recipes?.map的可选链操作符，防止部分食谱没有recipes数组时出现报错
• 增加简单的内联样式，分隔每个食谱卡片，提升可读性

内容的提问来源于stack exchange，提问作者Big. D