React购物车刷新报TypeError: Cannot convert undefined or null to object错误

报错根本原因 #

• App组件初始化时cart状态默认是空对象{}，不存在items和totalItems属性，导致Cart组件中调用Object.keys(cart.items)时传入undefined触发类型错误
• App组件的初始化useEffect中从localStorage读取到购物车数据后，没有调用setCart更新状态，导致刷新后Context下发的购物车数据始终为空，出现购物车被清空的现象
• 未处理localStorage无购物车数据时返回null的边界情况，也会导致数据解析异常

修复步骤 #

第一步：修改App.js代码 #

1. 给cart状态设置符合业务结构的初始值
2. 初始化useEffect中读取localStorage数据后，调用setCart更新状态，删除未定义的setNav、showNav冗余代码
   修改后的App.js核心代码如下：

function App() {
  // 给cart设置初始结构，避免属性undefined
  const [cart,setCart]=useState({totalItems: 0, items: {}});
 
  useEffect(() => {
      const savedCart = window.localStorage.getItem('cart');
      // 读取到存储的购物车数据就更新状态，否则用初始值
      if(savedCart) {
        setCart(JSON.parse(savedCart));
      }
  }, [])
  useEffect(() => {
    window.localStorage.setItem('cart',JSON.stringify(cart))
  }, [cart]);
  // 剩余return代码保持不变
}

第二步：修改Cart.js代码 #

1. 所有访问cart属性的位置增加可选链判空，避免不存在属性时报错
2. 不要直接在useEffect中push修改products数组，改用setProducts更新状态
3. 购物车空值判断逻辑调整，优先判断属性是否存在
   关键修改点如下：

useEffect(() => {
  // 先判空，避免totalItems不存在时判断异常
  if(!cart?.totalItems || cart.totalItems===0) {
    console.log("empty");
    return;
  } else {
    // cart.items不存在时默认传空对象，避免Object.keys报错
    console.log(Object.keys(cart.items || {}));
    const tempProducts = [];
    (Object.keys(cart.items || {})).map((m,i)=>{
      contents.map((content,j)=>{
        if(content._id===m ) {
          tempProducts.push(content);
          console.log(content.name);
        }
      })
    })
    // 用setProducts更新状态，不要直接修改原数组
    setproducts(tempProducts);
  } 
}, [cart, contents]);

建议所有访问cart.items的位置都增加可选链优化，比如cart.items?.[product._id]，进一步避免边界场景报错。

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