购物车项目报错：Uncaught TypeError: Cannot read properties of undefined (reading 'push')

这个错误的核心是你在尝试对一个undefined值调用push()方法，大概率是购物车商品数组未被正确初始化或引用。结合你提到的三个文件，按以下步骤排查修复：

1. 检查cartSlice.js的状态初始化 #

Redux Toolkit的slice中，必须确保购物车状态初始化为数组，不能是undefined：

// cartSlice.js 正确示例
import { createSlice } from '@reduxjs/toolkit';

// 关键：初始状态必须包含items字段且设为空数组
const initialState = {
  items: []
};

const cartSlice = createSlice({
  name: 'cart',
  initialState,
  reducers: {
    addToCart: (state, action) => {
      // 此时state.items是确定存在的数组，可安全调用push
      state.items.push(action.payload);
    }
  }
});

export const { addToCart } = cartSlice.actions;
export default cartSlice.reducer;

如果你的initialState没有items字段，或items被设为undefined，调用state.items.push()必然触发报错。

2. 确认index.js的Store配置 #

确保Redux Store正确注册了cart reducer：

// index.js 正确示例
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import cartReducer from './cartSlice';
import App from './App';

const store = configureStore({
  reducer: {
    cart: cartReducer // 这里的key要和组件中引用的路径一致
  }
});

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

如果cart reducer未注册，或注册的key错误，组件中获取的cart状态会是undefined，后续操作必然失败。

3. 检查Home.jsx的状态引用与dispatch调用 #

组件中要确保正确获取cart状态，且dispatch的action无误：

// Home.jsx 正确示例
import { useDispatch, useSelector } from 'react-redux';
import { addToCart } from './cartSlice';

function Home() {
  const dispatch = useDispatch();
  // 注意引用路径：state.cart.items，和store中注册的key对应
  const cartItems = useSelector(state => state.cart.items);

  const handleAddToCart = (product) => {
    // 确保传入的payload是合法的商品对象
    dispatch(addToCart(product));
  };

  return (
    <div>
      <button onClick={() => handleAddToCart({ id: 1, name: 'Sample Product' })}>
        Add to cart
      </button>
    </div>
  );
}

• 如果useSelector的路径错误（比如写成state.items而非state.cart.items），会得到undefined；
• 同时要确认addToCart action的导入和调用没有拼写错误。

额外排查点 #

• 检查slice的addToCart reducer中是否有其他逻辑意外将state.items改为undefined；
• 确认没有其他中间件或全局逻辑篡改了cart状态的items字段。

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