React-Query调用Strapi接口时执行map方法报undefined错误

触发TypeError: Cannot read properties of undefined (reading 'map')是两个写法问题共同导致的：

• 取值路径和Strapi v4的实际返回结构不匹配：Strapi v4的列表接口返回的内容中，实体数组存放在响应体的data字段下，你代码里写的res.data.products路径不存在，实际拿到的值是undefined，自然无法调用map方法
• React Query状态判断有漏洞：仅判断isLoading无法覆盖所有无数据场景，比如后台静默重拉、缓存更新的瞬时阶段，isLoading会返回false但data尚未完成赋值，此时直接调用map也会触发报错

1. 修正接口返回值的取值逻辑，匹配Strapi的实际返回结构
2. 给查询返回的data添加空数组默认值，兜底所有无数据的瞬时场景
3. （可选）将Strapi返回的id和attributes字段打平，减少后续模板中的嵌套取值代码

修复后的完整代码如下：

export default function ProductList() {
  // 给products加空数组兜底，避免undefined调用map
  const { data: products = [], isLoading } = useQuery('Products', () => 
    axios('/api/products').then((res) => {
      // 匹配Strapi返回结构，同时打平attributes字段
      return res.data.data.map(item => ({
        id: item.id,
        ...item.attributes
      }))
    })
  );

  if (isLoading) return <LoadingSpinner />

  return products.map((product) => (
    <ProductItem key={product.id} product={product} /> 
  ));
}

如果你不需要打平字段，也可以直接返回res.data.data，只是后续读取商品属性时需要写product.attributes.name这类嵌套路径，打平写法更便于业务代码维护。

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