React JS出现TypeError: Cannot read properties of undefined (reading 'length')如何修复

这个报错是因为你代码中调用.length属性的cartItems变量为undefined，程序尝试从不存在的对象上读取length属性就会触发该类型错误。

• 首先找到父组件中调用<Cart />的代码，检查cartItems参数的传值逻辑：最常见的情况是cartItems对应的状态初始值没有设置为空数组，比如useState()不传初始值默认就是undefined；或者异步请求购物车数据还没返回时，就直接把未赋值的变量传给了Cart组件。
• 可以在Cart组件代码第一行加console.log(cartItems)，打开浏览器控制台如果输出为undefined就能确认是传值问题。

以下几种方案任选一种即可：

1. 给prop设置默认值
   解构参数时直接指定兜底的空数组，就算父组件没传值也会用空数组兜底：

// 修改组件参数解构逻辑即可
const Cart = ({ cartItems = [] }) => {
  // 其余代码不变
}

2. 使用可选链运算符兼容undefined场景
   访问length属性前加?，如果cartItems为undefined会直接终止表达式执行，不会抛出错误：

// 修改判断条件即可
{cartItems?.length === 0 && (
  <div className="cart-items-empty">No items are added.</div>
)}

3. 父组件传值时做兜底校验
   父组件调用Cart时给参数加兜底，保证传过去的一定是数组：

<Cart cartItems={cartItems || []} />

4. 加前置非空判断
   先判断cartItems存在之后再读取长度：

{cartItems && cartItems.length === 0 && (
  <div className="cart-items-empty">No items are added.</div>
)}

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