Javascript React中未定义的未定义属性(Redux)

Javascript React中未定义的未定义属性(Redux),javascript,reactjs,react-redux,Javascript,Reactjs,React Redux,在React中使用Redux向购物车添加产品时,我遇到了未定义属性的问题。 这是非常奇怪的,因为我有一个非常类似的行动添加到收藏夹,它的工作。 该错误适用于第44行:TypeError:无法读取undefined的属性“undefined” addToCart function-const[{…cardAdd}]=newCard; 代码如下: import styles from "./App.module.scss"; import React, { useEffe

在React中使用Redux向购物车添加产品时,我遇到了未定义属性的问题。 这是非常奇怪的,因为我有一个非常类似的行动添加到收藏夹,它的工作。 该错误适用于第44行:TypeError:无法读取undefined的属性“undefined” addToCart function-const[{…cardAdd}]=newCard; 代码如下:

    import styles from "./App.module.scss";
import React, { useEffect } from "react";
import Modal from "./components/modal/Modal";
import Routes from "./components/routes/Routes";
import Button from "./components/button/Button";
import { connect } from "react-redux";
import {
  loadProductsAction,
  modalShowAction,
  modalCartShowAction,
  addToCartAction,
  deleteFromCartAction,
  addToFavoritesAction,
  deleteFromFavoritesAction,
  addCurrentIdAction,
  addCurrentNameAction,
} from "./actions/actions";

const App = ({
  items,
  addCurrentId,
  addCurrentName,
  loadProducts,
  modalShow,
  modalOpen,
  modalShowCart,
  modalCartOpen,
  productsCart,
  addCardsCart,
  deleteFromCart,
  productsFavorites,
  addFavorites,
  deleteFromFavorites,
  currentName,
  currentId,
}) => {
  useEffect(() => {
    loadProducts();
  }, [loadProducts]);

  const addToCart = (currentId) => {
    if (!productsCart.find((card) => card.sku === currentId)) {
      const newCard = items.filter((card) => card.sku === currentId);
      const [{ ...cardAdd }] = newCard;
      addCardsCart(cardAdd);
      localStorage.setItem(
        "cart",
        JSON.stringify([...productsCart, addToCart])
      );
      modalOpen(false);
    }
  };

  const deleteProduct = (currentId) => {
    deleteFromCart(currentId);
    modalCartOpen(false);
  };

  const addToFavorites = (id) => {
    if (!productsFavorites.find((card) => card.sku === id)) {
      const newCard = items.filter((card) => card.sku === id);
      const [{ ...addToFavorite }] = newCard;
      addFavorites(addToFavorite);
      localStorage.setItem(
        "favorites",
        JSON.stringify([...productsFavorites, addToFavorite])
      );
    }
  };

  const deleteFavorites = (id) => {
    deleteFromFavorites(id);
    localStorage.setItem(
      "favorites",
      JSON.stringify([...productsFavorites.filter((card) => card.sku !== id)])
    );
  };

  const openModal = (id) => {
    modalOpen(true);
    const newCard = items.filter((card) => card.sku === id);
    const [{ ...cardAdd }] = newCard;
    addCurrentId(cardAdd.sku);
    addCurrentName(cardAdd.name);
  };

  const openDeleteModal = (id) => {
    modalCartOpen(true);
    const newCard = items.filter((card) => card.sku === id);
    const [{ ...cardAdd }] = newCard;
    addCurrentId(cardAdd.sku);
  };

  const modalClose = () => {
    modalOpen(false);
  };
  const modalCloseCart = () => {
    modalCartOpen(false);
  };

  return (
    <div className={styles.App}>
      <Routes
        main={styles.main}
        items={items}
        productsCart={productsCart}
        productsFavorites={productsFavorites}
        onClick={openModal}
        deleteProduct={openDeleteModal}
        addToFavorites={addToFavorites}
        deleteFavorites={deleteFavorites}
      />
      {modalShow && (
        <Modal
          modalOne={true}
          onClick={modalClose}
          header={currentName}
          closeButton={true}
          text={`Do you want to buy ${currentName}?`}
          actions={
            <>
              <Button
                onClick={() => addToCart(currentId)}
                text="Ok"
                color="#d64531"
              />
              <Button
                text="Cancel"
                color="#d64531"
                onClick={() => modalClose()}
              />
            </>
          }
        />
      )}
      {modalShowCart && (
        <Modal
          modalOne={true}
          onClick={modalCloseCart}
          header={"Do you want to delete this item?"}
          closeButton={true}
          text={"The item will be removed from your cart! Do you confirm it?"}
          actions={
            <>
              <Button
                text="OK"
                color="#d64531"
                onClick={() => deleteProduct(currentId)}
              />

              <Button
                text="CANCEL"
                color="#d64531"
                onClick={() => modalCloseCart()}
              />
            </>
          }
        />
      )}
    </div>
  );
};

const mapStoreToProps = ({
  productsCart,
  items,
  modalShow,
  modalShowCart,
  productsFavorites,
  currentId,
  currentName,
}) => {
  return {
    items,
    modalShow,
    productsCart,
    modalShowCart,
    productsFavorites,
    currentId,
    currentName,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    loadProducts: () => dispatch(loadProductsAction()),
    modalOpen: (isOpen) => dispatch(modalShowAction(isOpen)),
    modalCartOpen: (isOpen) => dispatch(modalCartShowAction(isOpen)),
    addCardsCart: (cardAdd) => dispatch(addToCartAction(cardAdd)),
    deleteFromCart: (sku) => dispatch(deleteFromCartAction(sku)),
    addFavorites: (cardAdd) => dispatch(addToFavoritesAction(cardAdd)),
    deleteFromFavorites: (sku) => dispatch(deleteFromFavoritesAction(sku)),
    addCurrentId: (sku) => dispatch(addCurrentIdAction(sku)),
    addCurrentName: (name) => dispatch(addCurrentNameAction(name)),
  };
};

export default connect(mapStoreToProps, mapDispatchToProps)(App);
我已经解决了我的问题。 在initialStore中,我将currentId:[]更改为currentId:null 在减数器中,我只加一个没有数组的数

const initialStore = {
  items: [],
  currentId: [],
  currentName: [],
  modalShow: false,
  modalShowCart: false,
  productsCart: localStorage.getItem("cart")
    ? JSON.parse(localStorage.getItem("cart"))
    : [],
  productsFavorites: localStorage.getItem("favorites")
    ? JSON.parse(localStorage.getItem("favorites"))
    : [],
};
export default initialStore;