React电商网站报错：无法读取undefined的length属性及Reducer异常

问题1：Uncaught TypeError: Cannot read properties of undefined (reading 'length') #

• 原因：你在Navbar组件中直接使用state.length时，state是Redux store的根状态，而购物车数据实际存在state.handleCart字段下，直接访问根状态的length属性自然会报错。即便改用state?.length，也没指向正确的购物车数据路径。
• 解决方案：
  1. 用useSelector精准获取购物车状态，再用可选链或默认值处理空状态：

     import { useSelector } from 'react-redux';
     
     const Navbar = () => {
       // 正确获取handleCart对应的购物车数据
       const cartItems = useSelector(state => state.handleCart);
       // 用可选链+默认值确保不会因undefined报错
       const cartCount = cartItems?.length || 0;
     
       return (
         <div>
           <span>购物车数量：{cartCount}</span>
         </div>
       );
     };
     export default Navbar;
     

  2. 确保handleCart reducer的初始状态设为空数组[]，这样即使没有商品，length也会是0，避免出现undefined。

问题2：Store does not have a valid reducer #

• 原因：combineReducers接收的配置对象中，存在非合法reducer的项——要么是handleCart reducer没正确导出，要么是reducer写法不符合规范，或者rootReducer的配置有误。
• 解决方案：
  1. 检查handleCart.js的reducer写法，确保是标准的reducer函数并正确导出：

     // handleCart.js
     // 初始状态设为空数组，保证购物车数据结构统一
     const initialState = [];
     
     const handleCart = (state = initialState, action) => {
       switch(action.type) {
         case "ADD_TO_CART":
           // 实现添加购物车逻辑：判断商品是否已存在，存在则加数量，否则新增
           const existingItem = state.find(item => item.id === action.payload.id);
           if(existingItem) {
             return state.map(item => 
               item.id === action.payload.id 
                 ? {...item, quantity: item.quantity + 1} 
                 : item
             );
           } else {
             return [...state, {...action.payload, quantity: 1}];
           }
         // 后续可补充删除、修改数量等case
         default:
           return state;
       }
     };
     
     // 必须默认导出reducer函数
     export default handleCart;
     

  2. 检查rootReducer的index.js，确保combineReducers的参数是键值对，值为合法的reducer函数：

     // rootReducer/index.js
     import { combineReducers } from 'redux';
     import handleCart from './handleCart'; // 确保文件路径正确
     
     const rootReducer = combineReducers({
       handleCart: handleCart, // 键名要和useSelector中state.handleCart对应
       // 其他业务reducer可在此添加
     });
     
     export default rootReducer;
     

  3. 验证store创建代码，确保传入了正确的rootReducer：

     // store.js
     import { createStore } from 'redux';
     import rootReducer from './rootReducer';
     
     // 若用Redux Toolkit，推荐用configureStore，会自动处理配置问题
     const store = createStore(rootReducer);
     
     export default store;
     

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