如何使用map方法渲染嵌套对象元素？现有代码无法运行求助

你的代码主要有两个核心问题导致无法正常渲染产品名称，我来帮你一步步修复：

1. 嵌套的map未用JSX表达式包裹 #

在JSX语法中，所有需要执行的JavaScript代码（比如这里的嵌套map遍历）必须放在**大括号{}**内。你现在的嵌套map直接写在<div>中，没有被包裹，React会把它当成普通文本处理，而不会执行这个遍历逻辑。

2. 缺少空值安全检查 #

如果你的数据中存在suppliercard、supplier或product为undefined/null的情况，直接访问item.suppliercard.supplier.product会抛出TypeError。我们可以用**可选链操作符?.**来避免这种情况，确保只有当属性存在时才继续访问。

另外还有个小细节：<ul>标签内应该用<li>包裹列表项，这是符合HTML语义化的标准写法。

修正后的完整代码 #

list.map((item, index) => {
  return (
    <div key={index}>
      <ul>
        <li>{item.id}</li> {/* 用li包裹id，符合ul的语义规范 */}
      </ul>
      {/* 用{}包裹嵌套map，同时添加可选链做安全检查 */}
      {item.suppliercard?.supplier?.product?.map((subitem, i) => {
        return <p key={i}>{subitem.name}</p> {/* 给子元素添加key，符合React列表渲染要求 */}
      })}
    </div>
  )
})

额外说明 #

• 给嵌套map返回的<p>标签添加了key={i}，这是React列表渲染的强制要求，能避免控制台出现警告。
• 可选链?.会在某个属性不存在时直接返回undefined，不会抛出错误，即使数据有缺失，页面也不会崩溃。

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