React中如何嵌套使用map渲染表格？periodQuantity undefined报错怎么解决

报错原因 #

• 初始值错误：你给tableData设置的初始值是[{}]，组件第一次渲染时，数组内的空对象没有periodQuantity属性，解构后拿到的是undefined，调用map直接触发报错。后端接口返回数据是异步的，第一次渲染走的是初始值，所以会触发报错。
• 语法错误：你用的是函数组件，不存在this指向，你外层map已经把当前项的periodQuantity解构出来了，直接用变量即可，不需要写this.periodQuantity。
• 缺少返回值：外层map的回调函数没有return内层map的执行结果，就算解决报错也渲染不出任何内容。
• 表格结构逻辑错误：你现在的代码想把所有品类都塞到同一行里，和你想要的「一行对应一个品类」的效果不符。

修复方案 #

1. 先修改初始值，避免首次渲染报错：

// 把初始值从[{}]改成空数组
const [tableData, setTableData] = useState([]);

2. 提前提取所有去重的品类名，用于遍历生成表格行：

// 提取所有去重的品类名，加可选链和默认空数组避免报错
const categoryNames = Array.from(new Set(
  tableData.flatMap(item => item.periodQuantity?.map(q => q.name) || [])
))

3. 调整表格渲染逻辑，对齐你想要的表格效果：

<div>
  {/* 可选：加加载状态判断，接口返回前显示加载提示 */}
  {tableData.length === 0 ? <p>数据加载中...</p> : (
    <table>
      <thead>
        <tr>
          <th>Sortiment</th>
          {tableData.map(x => (
            <th key={x.periodId}>Week {x.period}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {/* 每个品类单独生成一行 */}
        {categoryNames.map(name => (
          <tr key={name}>
            <th>{name}</th>
            {/* 遍历所有周次，匹配当前品类对应周次的数量 */}
            {tableData.map(weekItem => {
              const targetItem = weekItem.periodQuantity.find(q => q.name === name)
              return <td key={weekItem.periodId}>{targetItem?.quantity || 0}</td>
            })}
          </tr>
        ))}
      </tbody>
    </table>
  )}
</div>

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