React中如何在fetch请求完成后执行map()方法

你的问题核心在于初始状态设置不当，且未在数据加载完成前做防护处理，导致map调用在productData.products还未存在时执行，引发错误。以下是具体修复方案：

1. 修正初始状态 #

接口返回的是包含products数组的对象，但你初始将productData设为了空数组[]。这会导致组件首次渲染时productData.products为undefined，调用map直接报错。把初始状态改成包含空products数组的对象：

const [productData, getproductData] = useState({ products: [] });

2. 给map添加防护逻辑 #

即使修正了初始状态，也可以通过条件判断或可选链操作符，确保只有当products存在且有数据时才执行map：

• 方式一：条件渲染（同时展示加载状态）

<div className='products'>
  {productData.products.length > 0 ? (
    productData.products.map(product => (
      <div className='product' key={product.id}>
        <div className='productInfo'>
          <div className='productTitle'>
            <div className='productBrand'>{product.brand}</div> 
            <div className='productName'>{product.title}</div>
          </div>
        </div>
      </div>
    ))
  ) : (
    <div>加载中...</div>
  )}
</div>

• 方式二：可选链操作符（更简洁）

<div className='products'>
  {productData.products?.map(product => (
    <div className='product' key={product.id}>
      <div className='productInfo'>
        <div className='productTitle'>
          <div className='productBrand'>{product.brand}</div> 
          <div className='productName'>{product.title}</div>
        </div>
      </div>
    </div>
  ))}
</div>

3. 优化fetch函数（可选） #

你用了async但嵌套了then，可以改成await写法让代码更清晰，同时增加错误捕获：

const fetchData = async () => {
  try {
    const res = await fetch('https://dummyjson.com/products?limit=0');
    const response = await res.json();
    getproductData(response);
  } catch (err) {
    console.error('数据获取失败:', err);
  }
}

修改完成后，组件会等待数据加载完成后再渲染产品列表，同时初始状态和防护逻辑也避免了undefined调用map的错误。

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