React页面刷新后Product ID显示undefined的问题

核心问题 #

刷新页面后product._id显示undefined，本质是组件渲染时机和异步请求的顺序冲突：

• 组件初始化时product的默认值是undefined（你调用useState()时未传入初始值）
• 刷新页面后，组件会先执行渲染逻辑，此时axios请求还未完成，product仍为undefined，直接访问product._id自然会返回undefined
• 首次加载正常是因为路由跳转时，组件是在参数就绪后触发渲染，且请求完成速度快，刚好赶上渲染流程

修复方案 #

1. 给product设置初始默认值

修改useState的初始值，避免直接访问未定义属性：

const [product, setProduct] = useState({});

或者结合可选链操作符，即使product未定义也不会报错：

src={`/api/pp/product/productPhoto/${product?._id}`}

2. 增加加载状态判断

在请求完成前不渲染图片，或显示加载提示，提升用户体验：

const [product, setProduct] = useState(null);
const [loading, setLoading] = useState(false);

const getProduct = async () => {
  setLoading(true);
  try {
    const { data } = await axios.get(`/api/pp/product/get-product/${params.slug}`);
    setProduct(data?.product);
  } catch (error) {
    console.log(error);
  } finally {
    setLoading(false);
  }
};

// 渲染逻辑中加入状态判断
return (
  <Layout>
    <div className="row">
      <div className="col-md-6">
        {loading ? (
          <div>加载中...</div>
        ) : product ? (
          <img
            src={`/api/pp/product/productPhoto/${product._id}`}
            width="300"
            height="250"
          />
        ) : (
          <div>产品不存在</div>
        )}
      </div>
      <div className="col-md-6">
        <h1>product details</h1>
      </div>
    </div>
  </Layout>
);

3. 优化useEffect的依赖判断

去掉依赖项的可选链，确保params.slug变化时能正确触发请求：

useEffect(() => {
  if (!params?.slug) return;
  getProduct();
}, [params.slug]); // 直接使用params.slug作为依赖，避免依赖项检测不准确

额外检查点 #

• 刷新页面时，浏览器地址栏的slug参数是否存在？如果路由配置有问题，刷新后params.slug可能为空，导致请求未触发，product一直处于初始状态
• 查看浏览器控制台的Network标签，确认刷新时后端接口/api/pp/product/get-product/${params.slug}是否正常响应，返回数据格式是否符合预期

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