ReactJS报错Cannot read property 'length' of undefined及cart未定义求助

1. 核心报错原因（length/cart未定义） #

你在首页/路由下渲染的Header组件没有传递cart属性，Header组件内直接读取props.cart.length时，props.cart为undefined就会触发该报错。而/food/:id路由下的Header传递了cart属性，所以仅在访问首页/刷新首页时稳定复现，切换路由时偶发。

2. 其他关联bug #

2.1 Context传值逻辑错误 #

你在userContext.Provider的value属性中误用了逗号运算符，代码：

value={([logggedInUser, setLoggedInUser], [signOutUser, setSignOutUser])}

逗号运算符会返回最后一个表达式的值，意味着Context中实际只存储了[signOutUser, setSignOutUser]，Header中取到的loggedInUser实际是signOutUser的初始空对象，会导致后续登录状态判断完全失效。同时注意你定义的logggedInUser拼写多了一个g，建议修正为标准的loggedInUser，避免后续手写取值时出错。

2.2 cartHandler逻辑错误 #

当前cartHandler逻辑冗余且过滤条件写错：

• 提前执行了一次setCart(newCart)，后续判断又重复赋值，会导致不必要的重渲染
• 过滤条件写为crt => cart.id != data，cart是数组不存在id属性，且对比对象错误

修复步骤 #

1. 统一给所有路由下的Header传递cart属性，或者给Header组件的cart设置默认值
   • 方案1：修改App.js中首页路由的Header代码：

   <Header cart={cart}></Header>
   

   • 方案2：在Header.js组件内添加默认值：

   const { cart = [] } = props;
   

2. 修复Context传值逻辑，把逗号改为对象包裹：

   // App.js中Provider部分
   <userContext.Provider value={{
     loggedInUser: [logggedInUser, setLoggedInUser],
     signOutUser: [signOutUser, setSignOutUser]
   }}>
   

   同步修改Header中Context取值逻辑：

   // Header.js中useContext部分
   const { loggedInUser } = useContext(userContext);
   const [loggedInUser, setLoggedInUser] = loggedInUser;
   

3. 修正cartHandler逻辑：

   const cartHandler = (data) => {
     const alreadyAdded = cart.find(crt => crt.id === data.id);
     if(alreadyAdded){
       // 若需移除已添加商品，过滤条件改为匹配id
       const remainingCarts = cart.filter(crt => crt.id !== data.id);
       setCart(remainingCarts);
     }else{
       setCart([...cart, data]);
     }
   }
   

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