React使用CommerceJS时报'requestContent' undefined错误如何解决

• App.js中cart的初始值为空对象{}，组件首次渲染时CommerceJS的异步接口还未返回数据，此时Cart组件尝试读取cart.line_items得到undefined，调用undefined.length直接触发类型错误
• 你观察到的三次渲染是React正常的更新流程：首次初始渲染→请求完商品数据执行setProducts触发第二次渲染→请求完购物车数据执行setCart触发第三次渲染，前两次渲染时cart都还没有填充正确的字段结构
• 代码中还存在两个隐藏问题：
  • Cart组件内的EmptyCart、FilledCart两个内部组件未写返回值，渲染时会返回undefined导致白屏
  • 购物车小计的属性名拼写错误，CommerceJS返回的字段是formatted_with_symbol，不是大写开头的formatted_With_symbol

1. 处理空值报错 #

二选一即可：

• 方案1：给cart设置符合结构的初始值，修改App.js中的状态初始化代码：

const [cart, setCart] = useState({
  line_items: [],
  subtotal: { formatted_with_symbol: '0' },
  total_items: 0
});

• 方案2：在所有读取cart属性的位置添加可选链做空值保护，比如把Cart组件的报错行改为：

const isEmpty = !cart?.line_items?.length;

同时把所有用到cart.line_items.map、cart.subtotal.formatted_with_symbol、cart.total_items的位置都加上可选链，避免后续出现同类报错。

2. 修复内部组件返回值问题 #

给EmptyCart和FilledCart添加返回值，推荐用括号包裹实现隐式返回：

const EmptyCart = () => (
  <Typography variant="subtitle1">
    你的购物车中没有任何商品，快去挑选喜欢的商品加入购物车吧。
  </Typography>
);

const FilledCart = () => (
  <>
    {/* 此处保留你原有FilledCart的代码逻辑 */}
  </>
);

3. 修正属性名拼写错误 #

把Cart组件中读取小计的代码修改为正确的字段名：

Subtotal: {cart.subtotal.formatted_with_symbol}

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