ReactJS设置sold_out为true显示商品售罄，加购后购物页报属性未定义错误

API 探路者

2026-10-6

错误根因

报错是因为购物车页面渲染时，获取到的product对象不存在is属性，product.is返回undefined，此时尝试读取undefined.sold_out就会抛出该类型错误。
商品列表页可正常运行、仅加购未售罄商品后报错是因为两个页面的商品数据结构不一致：商品列表接口返回的product携带is嵌套字段，而购物车接口返回的商品数据未包含该字段，未售罄商品可正常加购触发了购物车页的渲染逻辑，才暴露了这个问题。

解决方案

你可以任选以下任意一种方式修复：

优先使用可选链做属性安全访问，直接修改判断条件即可，无需调整后端接口：
把原来的!!product.is.sold_out改成!!product?.is?.sold_out，当product或is属性不存在时，表达式会直接返回false，不会抛出错误也不会渲染缺货提示。
新增属性存在性兜底判断：
把判断逻辑改成product?.is && product.is.sold_out，和可选链方案效果一致。
从数据根源统一结构：
调整购物车接口的返回逻辑，给所有返回的商品数据补充is字段默认值，示例默认值：is: { sold_out: false }，避免前端出现属性读取异常。

修正后代码示例

<CardContent className="content">
  <Typography
    className="title"
    gutterBottom
    variant="h5"
    component="h2"
  >
    {product.name}
  </Typography>
</CardContent>
{!!product?.is?.sold_out && (
  <Typography variant="h3">OutOfStock</Typography>
)}