React useState传递state作为prop报错 Commerce.js电商项目Cart组件渲染错误

问题引发原因 #

1. App.js中购物车状态的初始值类型错误：你为cart设置的初始值是空数组[]，但Commerce.js的commerce.cart.retrieve()接口返回的购物车数据是对象结构，类型不匹配会导致首次渲染时组件读取属性出现异常。
2. 价格对象直接被作为React子元素渲染：Commerce.js返回的所有价格相关字段（包含商品单价、购物车小计等）都是固定包含raw/formatted/formatted_with_symbol/formatted_with_code四个属性的对象，不能直接将整个对象放在JSX中渲染，必须指定要渲染的具体属性。你大概率是在未贴出的CartItem组件代码中直接写了类似{item.price}的代码触发了报错。

解决方法 #

1. 修正App.js中的cart初始值，匹配接口返回的对象类型：

// 错误写法
const [cart, setCart] = useState([]);
// 正确写法
const [cart, setCart] = useState({});

2. 检查并修正CartItem组件中的价格渲染逻辑，所有价格字段都要取对应属性渲染：

// 错误写法，直接渲染整个价格对象
<Typography variant="h6">{item.price}</Typography>
// 正确写法，取带货币符号的格式化金额渲染
<Typography variant="h6">{item.price.formatted_with_symbol}</Typography>

3. 可选优化：给Cart组件的属性判断增加可选链兜底，避免初始加载时的属性读取报错：

// 修改加载判断
if (!cartItems?.line_items) return <Typography variant="h4">Loading...</Typography>;

// 修改空购物车判断
{!cartItems?.line_items?.length ? <EmptyCart /> : <FilledCart />}

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