為什么 useReducer 運行兩次？

Question

我有個問題。 我使用 react js 創建了一個購物車。 我有一個名為 Header 的組件和一個用於 contextProvider 的組件。 在 contextProvider 我有一個 useReducer。 我的問題在於這兩個組件。 當我點擊一個產品時，它通常只會將一個產品添加到購物車中。 沒關系，我想要這個。 但問題就在這里，當我點擊購物車圖標時，屏幕上會出現一個模式卡，如果我關閉該模式卡，他們會將產品添加到購物車，該產品將被添加到購物車兩次。我知道哪一行代碼導致此錯誤，但我不知道為什么會發生。 問題出在 Header 組件中的 state 上嗎？ 如果我在上下文組件中刪除並添加它？ 它會正常工作，但是為什么。：如果您需要我的代碼的其他內容：告訴我。 這是我的代碼：我的上下文：

        import React, { useReducer, useState } from "react";

const Context = React.createContext({
  allAddedToCart: 0,
  productsList: [],
  addToCart: () => {},
  initializeProductList: (product) => {},
/*   open: false,
  setOpen: (open) => {}, */
});

export const ContextProvider = (props) => {
/* const [open, setOpen] = useState(false); */
  const [productsState, dispatchProducts] = useReducer(
    (prevState, action) => {
      if (action.type === "add_to_cart") {
        prevState.products_list.forEach((element, index) => {
          console.log(index);
          if (element.id === action.id) {
            element.number++;
            element.allPrice += element.price;
            console.log("finished");
          }
        });
        return {
          allAddedToCart: prevState.allAddedToCart + 1,
          products_list: prevState.products_list,
        };
      } else if (action.type === "initialize_list") {
        return {
          allAddedToCart: prevState.allAddedToCart,
          products_list: [...prevState.products_list, action.product],
        };
      }
    },
    {
      allAddedToCart: 0,
      products_list: [],
    }
  );
  return (
    <Context.Provider
      value={{
        allAddedToCart: productsState.allAddedToCart,
        productsList: productsState.products_list,
        addToCart: (id) => {
          console.log("add me to the cart");
          dispatchProducts({ type: "add_to_cart", id: id });
        },
        initializeProductList: (product) => {
          dispatchProducts({ type: "initialize_list", product: product });
        },
/*         open: open,
        setOpen: (open) => {
          setOpen(open);
        } */
      }}
    >
      {props.children}
    </Context.Provider>
  );
};

export default Context;

我的 Header 組件：

import { useContext, useState } from "react";
import ReactDOM from "react-dom";
import Context from "../context/context";
import styles from "../styles/Header.module.css";
import CartModal from "./CartModal";

const Header = (props) => {
    const ctx = useContext(Context)
    const [open, setOpen] = useState(false);

  return (
    <header className={styles.header}>
      {open ? ReactDOM.createPortal(<CartModal close={() => {setOpen(false)}} />, document.getElementById("modal_place")) : ""}
      <h1 className={styles.title}>a react shopping cart project</h1>
      <a href="/" onClick={(e) => {e.preventDefault(); setOpen(true)}}>
        <i className={`fas fa-shopping-cart ${styles.cart}`}></i>
        <span className={styles.added_products_number}>{ctx.allAddedToCart}</span>
      </a>
    </header>
  );
};

export default Header;

感謝您的幫助：）

Answer 1

那么，當您關閉購物車時，購物車是空的還是保持不變？ 另外，如果您第三次打開購物車並關閉購物車，產品會被添加三次嗎？ 還是只發生一次？