React JS中使用map渲染嵌套JSON的street字段失败问题求助

你当前代码报错的核心原因：address是单个对象而非数组，map方法仅适用于数组，直接对对象调用map会抛出错误。

根据你提供的JSON数据结构，每个用户的address是包含street字段的对象，无需遍历，直接访问字段即可。修正后的代码如下：

{items.map((item, id) =>
  <div key={id} className="">
    <h3>{item.name}</h3>
    <p>{item.phone}</p>
    {/* 直接访问对象的street属性，可选链操作符避免空值报错 */}
    <p>{item.address?.street}</p>
  </div>
)}

补充说明： #

• 添加key={id}是React列表渲染的规范要求，帮助React高效识别列表项的变化。
• 使用?.可选链操作符是为了防止某些用户数据缺失address字段时页面崩溃，提升代码健壮性。

内容的提问来源于stack exchange，提问作者Lukman Budiman