React使用commerce.js开发电商时报错Cannot read properties of undefined (reading 'map')

1. 你在App.js中给products设置的初始值是[]空数组
2. 组件首次渲染时，异步接口请求还未完成，Products组件拿到的products就是初始的空数组，空数组本身没有data属性，所以products.data为undefined，对undefined调用map方法就会抛出你遇到的报错。
3. 你打印能看到正常数据，是因为浏览器控制台打印的是引用类型的值，等接口返回数据更新后，你点开打印的对象已经是更新后的值，所以会产生已经拿到数据但map报错的错觉。

以下三种方法任选一种即可：

• 方法1：修改初始state结构匹配接口返回值
  把App.js中的初始值设置改为：

const [products, setProducts] = useState({ data: [] });

这样首次渲染时products.data就是空数组，调用map不会报错，等接口返回后会自动替换为真实数据。

• 方法2：添加可选链判断
  修改Products.js中遍历的代码，添加可选链避免对undefined调用方法：

{products?.data?.map((product) => (
  <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
    <Product product={product} />
  </Grid>
))}

• 方法3：添加条件渲染
  在遍历前先判断数据是否存在：

{products && products.data && products.data.map((product) => (
  <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
    <Product product={product} />
  </Grid>
))}

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