得到这个 TypeError: state is not iterable while using useReducer()答案

【问题标题】：Getting this TypeError: state is not iterable while using useReducer()得到这个 TypeError: state is not iterable while using useReducer()
【发布时间】：2021-12-28 05:18:58
【问题描述】：

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

在产品上单击添加到购物车按钮时，我在使用 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;
  }
};

上下文.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;

在点击添加到购物车按钮时发现此错误很有挑战性

如果有人帮助我找到解决方案，那真的很重要！！！

【问题讨论】：

这看起来像是一个错字。在ADD_TO_CART 中，您有return { ...state, cart: [...state, { ...action.payload, qty: 1 }] };，它将state 作为对象传播（第一个...state）并将state 作为可迭代传播（第二个...state，在[] 内部）。但是state 是不可迭代的，它是一个普通的对象。第二个 ...state 应该传播 state.cart 数组：return { ...state, cart: [...state.cart, { ...action.payload, qty: 1 }] };
谢谢你！真的很赞！！！！

标签： reactjs react-hooks use-reducer

【解决方案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 }
    ],
  };

【讨论】：