当我想将商品添加到购物车时，state.cartItems 不可迭代

Question

我正在尝试通过制作一个小型电子商务网站来学习 mern stack 和 redux，我有这个 state.cartItmes is not iterable error in Z7490FE17CAEC373F2299D65B6E20E880

所以因为我希望有一天我会成为一名前端开发人员，所以我正在做开发人员所做的事情......我在问你们我在意大利面条代码中做错了什么

推车减速机

export const cartReducer = (state = { cartItems: [] }, action) => {
  if (action.type === "ADD_TO_CART") {
    return { cartItems: [...state.cartItems, action.payload] };
  }

  return state;
};

购物车动作

import axios from "axios";

export const addToCart = (id) => async (dispatch, getState) => {
  try {
    const { data } = await axios.get(`/products/${id}`);

    dispatch({ type: "ADD_TO_CART", payload: data });

    localStorage.setItem(
      "cartItems",
      JSON.stringify(getState().cart.cartItems)
    );
  } catch (error) {
    console.log(error.message);
  }
};

购物车组件

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addToCart } from "../actions/CartActions";
import { useParams } from "react-router-dom";

const Cart = () => {
  const dispatch = useDispatch();
  const { id } = useParams();

  const cart = useSelector((state) => state.cart);
  const { cartItems } = cart;
  console.log(cartItems);

  useEffect(() => {
    dispatch(addToCart(id));
  }, [dispatch, id]);

  return (
    <section>
      <div className="cart">
        <div className="cart-items">Cart</div>
        <div className="buy-items"></div>
      </div>
    </section>
  );
};

export default Cart;

Answer 1

分析您的代码后，我认为问题可能是您最初设置的空数组。 您应该尝试使用一些默认值作为初始值，我认为这应该可以解决问题。

此外，将异步逻辑放在减速器中通常不是一个好习惯。 您可能需要为此实现一些中间件。 这里有一些关于它的更多信息： https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-middleware-to-enable-async-logic

Answer 2

添加一个空数组帮助了我，谢谢