React电商项目使用useReducer报错TypeError: state is not iterable求助

问题原因排查 #

• 错误1：CartReducer.js中ADD_TO_CART分支逻辑错误：你的state是包含products和cart两个属性的对象，你试图直接展开state来构造新的cart数组，对象无法被迭代展开为数组，因此触发state is not iterable报错，正确应该展开的是state.cart而非state。
• 错误2：CartReducer.js中移除购物车的action type拼写不匹配，定义时写的是REMOVE_FROM CART（中间为空格），但Cards.js里dispatch的是REMOVE_FROM_CART（中间为下划线），二者不一致会导致移除购物车逻辑完全不生效。
• 错误3：Context.js中Reducer导入路径错误，你的Reducer文件名为CartReducer.js，但导入语句写的是from "./Reducer"，路径不匹配会导致Reducer加载失败。

修复后代码 #

1. CartReducer.js #

export const CartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      // 修正：展开state.cart而不是state对象
      return { ...state, cart: [...state.cart, { ...action.payload, qty: 1 }] };
    case "REMOVE_FROM_CART":
      // 修正：action type补全下划线，和调用处保持一致
      return {
        ...state,
        cart: state.cart.filter((c) => c.id !== action.payload.id),
      };

    default:
      return state;
  }
};

2. Context.js #

import React, { createContext, useContext, useReducer } from "react";
import products from "../components/data";
// 修正导入路径，和实际文件名对齐
import { CartReducer } from "./CartReducer";
const Cart = createContext();

function Context({ children }) {
  const [state, dispatch] = useReducer(CartReducer, {
    products: products,
    cart: [],
  });

  return <Cart.Provider value={{ state, dispatch }}>{children}</Cart.Provider>;
}

export default Context;

export const CartState = () => {
  return useContext(Cart);
};

额外优化提示 #

Cards.js中列表渲染的key属性绑定位置错误，你当前把key绑定在了div.card上，但map返回的最外层节点是Fragment，建议调整为用商品唯一id作为key，性能更优：

{products
  .filter((itema) => itema.type === props.type)
  .map((item) => {
    return (
      <div className="col" key={item.id}>
        <div className="card">
          {/* 原有卡片逻辑保持不变 */}
        </div>
      </div>
    )
  })
}

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