React渲染商品图片数组报错：Cannot read properties of undefined (reading '0')

问题根源 #

组件初始渲染时，item的初始值是空对象{}，此时item.img为undefined，直接访问item.img[0]就会触发这个报错。因为fetch是异步操作，组件会先完成第一次渲染，这时候还没拿到后端返回的数据，item仍保持初始空对象状态，自然无法读取未定义的img数组的下标。

可行修复方案 #

1. 使用可选链操作符（最简洁推荐） #

通过?.语法安全访问数组元素，当item.img不存在时，表达式会返回undefined，不会抛出错误：

<ProductLargeImage src={item.img?.[0]}></ProductLargeImage>

2. 条件渲染 #

先判断item.img是否存在，再渲染图片组件：

{item.img && <ProductLargeImage src={item.img[0]}></ProductLargeImage>}

3. 初始化状态设置默认数组 #

把useState的初始值改成包含空数组的对象，确保item.img始终是数组类型：

const [item, setItem] = useState({ img: [] });

4. 添加加载状态提示 #

如果想给用户更友好的反馈，可以先展示加载状态，等数据返回后再渲染完整内容：

if (!item.img) {
  return <div>加载中...</div>;
}

return(
  <ProductContainer className='container'>
      <ProductPath>Home/Product</ProductPath>
      <h2 className='title'>Product</h2>
      <ProductWrap>
          <div>{item.title}</div>
          <div>{item.brand}</div>
          <ProductLargeImage src={item.img[0]}></ProductLargeImage>
      </ProductWrap>
  </ProductContainer>
)

额外优化建议 #

给fetch添加错误处理，避免请求失败时item一直保持空对象状态：

useEffect(() => {
    fetch(`http://localhost:3001/items/${id}`)
    .then((response) => {
      if (!response.ok) {
        throw new Error('商品数据请求失败');
      }
      return response.json();
    })
    .then((data) => setItem(data))
    .catch((error) => console.error(error));
}, [id]);

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