Getting this TypeError: state is not iterable while using useReducer()

Question

我正在尝试创建 E-comm 网站，其中 header 包含购物车、登录按钮、添加心愿单按钮，并且还在 body 中过滤掉布料、电子产品和鞋类部分以及还创建了带有产品名称和描述价格的卡片，还创建了一些其他页面，如关于我们、主页、联系方式和添加到购物车页面

在产品上单击“添加到购物车”按钮时，我在使用 useReducer() 时遇到困难创建添加到购物车页面和所有内容

CartReducer.js

export const CartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      return { ...state, cart: [...state, { ...action.payload, qty: 1 }] };
    case "REMOVE_FROM CART":
      return {
        ...state,
        cart: state.cart.filter((c) => c.id !== action.payload.id),
      };

    default:
      return state;
  }
};

Context.js

import React, { createContext, useContext, useReducer } from "react";
import products from "../components/data";
import { CartReducer } from "./Reducer";
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);
};

Carts.js

import React from "react";
import "../../index.css";
import { CartState } from "../../context/Context";
function Cards(props) {
  const {
    state: { products, cart },
    dispatch,
  } = CartState();
  return (
    <>
      <section id="header" className="">
        <div className="container-fluid">
          <div className="row ">
            <div className="col-12">
              <div className="row row-cols-1 row-cols-md-3 g-3">
                {products
                  .filter((itema) => itema.type === props.type)
                  .map((item, index) => {
                    return (
                      <>
                        <div className="col">
                          <div className="card" key={index}>
                            <img
                              src={item.images}
                              style={{ height: "300px" }}
                              className="card-img-top"
                              alt="..."
                            />
                            <div className="card-body">
                              <h5 className="card-title">{item.title}</h5>
                              <h5 className="card-title">
                                Price: ₹ {item.price}
                              </h5>
                              <span className="row row-cols-1 row-cols-md-1 g-1">
                                <span className="col-12">
                                  {cart.some((p) => p.id === item.id) ? (
                                    <button
                                      className="btn btn-danger"
                                      onClick={() => {
                                        dispatch({
                                          type: "REMOVE_FROM_CART",
                                          payload: item,
                                        });
                                      }}
                                      type="submit"
                                    >
                                      Remove From Cart
                                    </button>
                                  ) : (
                                    <button
                                      className="btn btn-warning"
                                      onClick={() => {
                                        dispatch({
                                          type: "ADD_TO_CART",
                                          payload: item,
                                        });
                                      }}
                                      type="submit"
                                    >
                                      Add To Cart
                                    </button>
                                  )}
                                </span>
                              </span>
                            </div>
                          </div>
                        </div>
                      </>
                    );
                  })}
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Cards;

当点击“添加到购物车”按钮时发现很难得到这个错误

如果有人能帮助我找到解决方案，那真的很感激！！！

Answer 1

初始状态是一个对象，不可迭代：

{
  products: products,
  cart: [],
}

ADD_TO_CART 案例需要通过将 state.cart 数组浅复制到 cart 属性:

来处理这个问题

case "ADD_TO_CART":
  return {
    ...state,
    cart: [
      ...state.cart, // <-- shallow copy the cart state
      { ...action.payload, qty: 1 }
    ],
  };

Getting this TypeError: state is not iterable while using useReducer()

Getting this TypeError: state is not iterable while using useReducer()

reactjs

react-hooks

use-reducer