React Hooks报错：Cannot read property 'map' of undefined 问题排查

我一眼就看出问题出在你更新Products状态的方式上，咱们来拆解一下：

错误根源 #

当你使用setProducts([...Products, response.data.products])时，你把整个返回的products数组作为单个元素追加到了原Products数组中，导致Products变成了二维数组（数组嵌套数组）。举个例子：

• 第一次请求后，response.data.products是[产品1, 产品2, ..., 产品8]，此时Products是正常的一维数组
• 触发加载更多后，response.data.products是[产品9, 产品10, ..., 产品16]，执行[...Products, response.data.products]会得到[[产品1,...产品8], [产品9,...产品16]]

之后在renderCards里map这个二维数组时，每个product变量其实是一个子数组，而不是单个产品对象——这就导致product.images是undefined，传到ImageSlider组件后，props.images是undefined，调用map自然就抛出了Cannot read property 'map' of undefined的错误。

修复方案 #

你需要把新返回的products数组的每个元素都展开合并到原数组中，而不是把整个数组当单个元素加进去。修改getProducts里的状态更新代码：

const getProducts = (variables) => {
  Axios.post('/api/product/getProducts', variables)
    .then(response => {
      if (response.data.success) {
        // 把新数组的元素展开，合并到原数组
        setProducts([...Products, ...response.data.products])
        setPostSize(response.data.postSize)
      } else {
        alert('Failed to fetch product datas')
      }
    })
}

额外优化建议 #

因为React的setState是异步操作，当你依赖当前状态来更新新状态时，最好使用函数式更新，这样能确保基于最新的状态快照进行更新，避免并发更新时的意外问题：

setProducts(prevProducts => [...prevProducts, ...response.data.products])

这样写的话，React会把当前最新的Products状态作为参数prevProducts传入，保证更新逻辑的准确性。

验证修复 #

修改后，Products会一直保持一维数组的结构，renderCards里的map能正确遍历每个产品对象，product.images能正常传递给ImageSlider，组件就能正常渲染了。

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