React组件调用后端API获取数据返回空数组问题求助

问题排查与修复方案 #

1. 优先修复渲染逻辑错误

你当前代码里products.map的回调函数使用了大括号但没有返回值，即便接口返回了数据也会渲染空白，你大概率是误以为接口返回空数组，实际数据已经正常拿到了。
原有错误写法：

{products.map(product => {
  <div key={product.name}>
    <h1>{product.name}</h1>
    <img src={product.image} alt={product.name} />
  </div>
})}

修复为隐式返回即可：

{products.map(product => (
  <div key={product.name}>
    <h1>{product.name}</h1>
    <img src={product.image} alt={product.name} />
  </div>
))}

或者手动加return语句：

{products.map(product => {
  return (
    <div key={product.name}>
      <h1>{product.name}</h1>
      <img src={product.image} alt={product.name} />
    </div>
  )
})}

2. 补全useEffect依赖项

你当前的useEffect依赖数组为空，只会在组件首次挂载时执行一次，如果路由参数id是在组件挂载后才解析完成、或者路由切换时id发生变化，都不会重新发起请求。需要把id添加到依赖数组：

useEffect(() => {
  async function fetchItems() {
    // 原有请求逻辑
  }
  fetchItems()
}, [id]) // 加入id作为依赖

3. 添加错误处理与调试日志确认接口状态

如果修复完上面两点还是有问题，加日志确认请求参数和返回结果是否符合预期，同时捕获请求异常：

async function fetchItems() {
  try {
    // 确认路由取到的id是否正确
    console.log('请求的购物车id：', id)
    const data = await fetch(`http://localhost:8000/api/cart/${id}`);
    // 校验接口请求是否成功
    if (!data.ok) throw new Error(`请求失败，状态码：${data.status}`)
    const res = await data.json();
    // 确认接口返回结果
    console.log('接口返回数据：', res)
    setProducts(res);
  } catch (err) {
    console.error('拉取数据失败：', err)
  } finally {
    setPending(false)
  }
}

加完后打开浏览器控制台查看输出即可定位问题：

• 如果id打印为undefined，检查你的react-router路由配置是否正确声明了:id参数
• 如果接口报404/500，确认后端接口路径、请求方法是否匹配

内容的提问来源于stack exchange，提问作者Hazem Ben Abdelhafidh