React中useEffect获取服务器数据返回空对象问题求助

看起来你已经做了不少排查工作——Postman验证API正常、检查了路径、尝试了不同的Effect钩子，甚至加了日志确认函数执行了，但还是没解决问题。咱们一步步来拆解可能的原因：

首先，最可能的坑：路由参数获取错误 #

如果你使用的是react-router-dom v6，那你代码里的match参数其实已经不存在了！v6版本不再通过props传递match对象，而是需要用useParams()钩子来获取路由参数。这会导致match.params.id是undefined，你的请求URL变成/api/products/undefined，自然拿不到正确数据，但Postman用了正确的ID所以没问题。

修复方法：改用useParams() #

修改你的ProductDetail组件：

import React, { useEffect, useState } from "react"
import { useParams } from "react-router-dom" // 引入useParams钩子
import EcommerceLayoutsTypeFourteenth from "../layouts/Ecommerce/EcommerceLayoutsTypeFourteenth/EcommerceLayoutsTypeFourteenth"
import EcommerceLayoutsTypeSecond from "../layouts/Ecommerce/EcommerceLayoutsTypeSecond/EcommerceLayoutsTypeSecond"
import axios from "axios"

const ProductDetail = ({ products }) => {
  const [product, setProduct] = useState({})
  const { id } = useParams() // 直接获取路由参数id

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        console.log("当前请求的产品ID:", id) // 先确认ID是否正确
        const response = await axios.get(`/api/products/${id}`)
        console.log("API返回的数据:", response.data)
        setProduct(response.data)
      } catch (err) {
        console.error("获取产品数据失败:", err) // 捕获错误，避免静默失败
      }
    }
    fetchProduct()
  }, [id]) // 依赖换成id，而不是match

  // 增加加载状态提示，避免渲染空数据
  if (!Object.keys(product).length) {
    return <div>加载中...</div>
  }

  return (
    <>
      <EcommerceLayoutsTypeSecond product={product} />
      <EcommerceLayoutsTypeFourteenth products={products} />
    </>
  )
}

export default ProductDetail

同时更新App.js里的路由写法（v6要求用element属性代替render）：

// App.js的路由部分
<Switch>
  <Route exact path="/" element={<HomeScreen products={products} />} />
  <Route path="/products/:id" element={<ProductDetail products={products} />} />
</Switch>

其他排查方向 #

如果上面的方法没解决问题，再检查这几点：

• 查看浏览器Network面板：打开Chrome DevTools的Network标签，找到你的产品请求，确认请求URL是否正确、响应状态码是不是200、响应数据是否符合预期。
• 检查axios的baseURL配置：如果你的axios全局配置了baseURL，可能导致实际请求的URL和你写的不一致（比如baseURL是前端域名，而API在后端域名），Postman直接请求API域名所以没问题，但前端请求跨域或者地址错误。
• 增加状态更新日志：在组件顶部加console.log("当前product状态:", product)，确认状态是否真的更新了——有时候状态更新了，但子组件没正确接收props导致没渲染。

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