购物车添加商品时出现TypeError: Cannot read properties of undefined (reading '_id')

错误根源 #

报错TypeError: Cannot read properties of undefined (reading '_id')是因为cartItems数组中存在undefined元素，当执行find遍历到这类元素时，访问item._id就会触发错误。刷新页面后购物车状态被重置为初始有效值，所以重复操作不再报错。

具体修复步骤 #

• 确保状态初始化正确：在StateContext.js中，确认cartItems初始化为空数组，避免undefined或异常值：

  const [cartItems, setCartItems] = useState([]);
  

• 添加空值防护：修改find逻辑，先校验item是否有效再访问属性：

  const checkProductInCart = cartItems.find((item) => item && item._id === product._id);
  

• 校验传入参数：调用onAdd的地方，先确认product是有效对象再执行添加操作：

  if (product?.._id) {
    onAdd(product, quantity);
  }
  

• 本地存储数据校验：如果购物车数据存在本地存储，读取时过滤无效项：

  const savedCart = JSON.parse(localStorage.getItem('cartItems')) || [];
  const validCart = savedCart.filter(item => item?.._id);
  const [cartItems, setCartItems] = useState(validCart);
  

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