React使用Material-UI Table时报Cannot read property 'map' of undefined错误

报错原因 #

• 变量引用错误：你已经在外层通过orders.map((order) => ...)遍历订单数组，当前循环上下文的单个订单对象是order，items属性属于单个order对象，不属于整个orders数组，所以orders.items是undefined，调用map方法就会抛出该错误。
• 缺少字段兼容逻辑：如果后端返回的订单数据可能缺失items字段，即使修正了变量引用，也可能出现同类报错，需要增加兼容判断。

修复方案 #

把报错位置的代码替换为以下内容即可：

<TableBody>
  {order?.items?.map((item) => (
    <TableRow key={item.documentID}>
      <TableCell>{item.productName}</TableCell>
    </TableRow>
  ))}
</TableBody>

可选链运算符?.会在前面的属性为undefined/null时直接中断调用返回undefined，不会抛出运行时错误，自动兼容字段缺失的场景。

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