React组件数组映射报错：无法获取pizza数组元素的name属性

核心错误点 #

• Props接收逻辑错误：父组件通过data={mockJson}传递数据，子组件RestaurantCard接收的是包含data属性的props对象，而非直接的mockJson本身。你直接调用data.pizza会找不到对应属性，正确路径应为data.data.pizza，或通过解构props简化调用。
• map返回的JSX结构不合法：当前map回调中直接返回两个<p>标签，React要求单个渲染元素必须有唯一根节点，未包裹的多个元素会触发渲染报错。
• 未定义变量的控制台输出：{console.log(helo, 'data2')}中的helo此时未定义，会抛出ReferenceError，中断组件渲染流程。
• key值使用不规范：用数组索引作为key容易在数组元素变动时引发渲染异常，应使用每个pizza对象自带的唯一id属性。

修复后的完整代码 #

const mockJson = {
  "pizza": [
    {
      "id": 0,
      "name": "Margherita",
      "description": "",
      "ingredients": ["tomato sauce", "mozzarella"],
      "spicy": false,
      "vegetarian": true,
      "price": 17.0,
      "image": "https://i.imgur.com/8B8YLOo.jpg"
    },
    {
      "id": 1,
      "name": "Pepperoni",
      "description": "",
      "ingredients": ["tomato sauce", "mozzarella", "double pepperoni"],
      "spicy": false,
      "vegetarian": false,
      "price": 20.0,
      "image": "https://i.imgur.com/OHHctnf.jpg"
    }
  ]
}

// 解构props，简化数据调用
const RestaurantCard = ({ data }) => {
  console.log(data, 'data1')
  return (
    <div className="res-card">
      {data.pizza?.map((pizzaItem) => (
        // 用Fragment包裹多个元素，保证JSX结构合法
        <>
          <p key={`name-${pizzaItem.id}`}>{pizzaItem.name}</p>
          <p key={`duplicate-name-${pizzaItem.id}`}>{pizzaItem.name}</p>
        </>
      ))}
    </div>
  ) 
}

const Body = () => {
  return (
    <div className="res-container">
      <RestaurantCard data={mockJson} />
    </div>
  )
}

额外说明 #

• 移除了未定义变量的console.log语句，避免不必要的报错。
• 将map参数名helo改为pizzaItem，提升代码语义可读性。
• 给每个<p>标签设置了唯一key（基于pizza的id拼接后缀），避免同个元素内key重复。

内容的提问来源于stack exchange，提问作者Vimal Vinayraj