我想一键将多个对象发送到购物车。为此，我循环一个数组并调用addProductToCart但它只保存最后一个对象CartContext state.

当逐个发送对象时（来自不同页面，或者如果发送的是同一页面的一些对象，但不是全部），它会保存在状态CartContext.

当我测试这个时，我在循环时设置了延迟addProductToCart并看到每个物体都在CartContext状态，但下一个对象会覆盖前一个对象。

import React from "react";
import { useContext } from "react";
import { CartContext } from "../../contexts/cart.context";
import Button, { BUTTON_TYPE_CLASSES } from "../buttons/buttons.component";
import {
    BuyButtonCartSymbol,
    BuyButtonCartTitle,
    CurrentPrice,
    CurrentPriceCont,
    CurrentPriceSymbol,
    OldPrice,
    OldPriceCont,
    OldPriceSymbol,
    PriceDetailCont,
    QuantityOldPrice,
    Quantity,
} from "./priceDetail.style";

const PriceDetail = (...props) => {
    const [object] = props;
    const { addItemToCart } = useContext(CartContext);

    const handleOptionsFocus = () => {
        object.setFocusClicked(true);
    };

    let oldPriceSum = 0;
    let newPriceSum = 0;

    // Sum old prices
    for (const value of object.arrayOfObjectsSelected) {
        if (value.oldPrice) {
            oldPriceSum += value.oldPrice;
        } else {
            oldPriceSum += value.price;
        }
    }

    // Sum current prices
    for (const value of object.arrayOfObjectsSelected) {
        newPriceSum += value.price;
    }

    //Multiple objects sending to cart
    var testArr = object.arrayOfObjectsSelected;

    const addProductToCart = () => {
        testArr.forEach((prod, ind) => {
            console.log(ind, prod);
            addItemToCart(prod);
        });
    };

    return (
        <PriceDetailCont>
            <QuantityOldPrice>
                {oldPriceSum !== newPriceSum && (
                    <OldPriceCont>
                        <OldPrice>{oldPriceSum.toLocaleString("fr-FR")}</OldPrice>
                        <OldPriceSymbol> &#8381;</OldPriceSymbol>
                    </OldPriceCont>
                )}
                {object.selectedOptions.length > 1 && (
                    <Quantity onClick={handleOptionsFocus}>
                        [ {object.selectedOptions.length}{" "}
                        {object.selectedOptions.length < 5 ? "pred" : "predov"} ]
                    </Quantity>
                )}
            </QuantityOldPrice>
            <CurrentPriceCont>
                <CurrentPrice>{newPriceSum.toLocaleString("fr-FR")}</CurrentPrice>
                <CurrentPriceSymbol> &#8381;</CurrentPriceSymbol>
            </CurrentPriceCont>
            <Button
                buttonType={BUTTON_TYPE_CLASSES.buy}
                type="button"
                onClick={addProductToCart}
            >
                <BuyButtonCartSymbol />
                <BuyButtonCartTitle>to Cart</BuyButtonCartTitle>
            </Button>
            <Button buttonType={BUTTON_TYPE_CLASSES.oneClick} type="button">
                Instant buy
            </Button>
        </PriceDetailCont>
    );
};

export default PriceDetail;

import { createContext, useState } from "react";

// Helper function to add item to cart with conditions
const addCartItem = (cartItems, productToAdd) => {
    const existingCartItem = cartItems.find(
        (cartItem) => cartItem.pid === productToAdd.pid
    );

    if (existingCartItem) {
        return cartItems.map((cartItem) =>
            cartItem.pid === productToAdd.pid
                ? { ...cartItem, quantity: cartItem.quantity + 1 }
                : cartItem
        );
    }

    return [...cartItems, { ...productToAdd, quantity: 1 }];
};

export const CartContext = createContext({
    cartItems: [],
    addItemToCart: () => {},
});

export const CartProvider = ({ children }) => {
    const [cartItems, setCartItems] = useState([]);

    const addItemToCart = (productToAdd) => {

        setCartItems(addCartItem(cartItems, productToAdd));
    };

    const value = { cartItems, addItemToCart };

    return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
};

Issue

当循环数组并为每次迭代调用状态设置器时，或者当您只是连续多次调用它时，React 将使用所谓的自动配料，并将更改分组到一个渲染中。

为了说明这一点，我创建了下面的工作示例。我们期望有state等于3单击按钮后，但它会1因为它只使用最后一个setState(state + 1).

function App() {
  const [state, setState] = React.useState(0);
  return (
    <div>
      <button
        onClick={() => {
          setState(state + 1);
          setState(state + 1);
          setState(state + 1);
        }}
      >
        Update
      </button>
      state : {state}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

Solution

To have 自动配料并且仍然是预期的行为，您可以使用功能状态更新器，像这样：

function App() {
  const [state, setState] = React.useState(0);
  return (
    <div>
      <button
        onClick={() => {
          setState(prev => prev + 1);
          setState(prev => prev + 1);
          setState(prev => prev + 1);
        }}
      >
        Update
      </button>
      state : {state}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(<App />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>

对于您的情况，要具有与上述相同的行为，请更改您的调用方式setCartItems in addItemToCart在你的背景下。就像这样：

setCartItems(prevCartItems => addCartItem(prevCartItems, productToAdd));