React全栈开发报错：Cannot read properties of undefined (reading 'map')

报错核心原因 #

• 组件首次渲染时，异步接口请求还未返回结果，此时product为初始值：如果没有设置初始值就是undefined，就算你设置了初始为空对象，对应的颜色字段也为undefined，对undefined调用map方法自然会抛出该错误
• 没有确认接口实际返回的颜色字段拼写，盲目尝试两种拼写无法定位问题

具体解决步骤 #

1. 定义product状态时设置合理初始值，直接初始化对应颜色字段的空数组：

// 确认数据库用澳式拼写colour，就直接用colour初始化
const [product, setProduct] = useState({
  colour: []
})

2. 渲染时添加可选链做防御性判断，避免属性不存在时报错：

<Filter>
  <FilterTitle>Colour</FilterTitle>
  {/* 可选链遇到undefined会直接终止执行，不会调用map报错 */}
  {product?.colour?.map((c)=> (
    <FilterColour color={c} key={c}/> 
  ))}
</Filter>

如果项目不支持可选链语法，也可以换成逻辑与判断：

{product && product.colour && product.colour.map((c)=> (
  <FilterColour color={c} key={c}/> 
))}

3. 确认接口返回的字段名，在请求逻辑里加日志打印，打开浏览器控制台确认返回字段的实际拼写，同时加上错误捕获方便排查请求问题：

useEffect(() => {
  const getProduct = async () => {
    try {
      const res = await publicRequest.get("/products/find/" + id);
      console.log('接口返回产品数据：', res.data) // 加这行查看颜色字段实际是color还是colour
      setProduct(res.data);
    } catch (err) {
      console.log('获取产品数据失败：', err)
    }
  };
  getProduct();
}, [id]);

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