反应状态和购物车的问题答案

【问题标题】：Trouble with react state and shopping cart反应状态和购物车的问题
【发布时间】：2022-01-17 03:05:43
【问题描述】：

我为购物车定义了一些反应上下文，我希望能够在每个子组件中访问这些上下文。我还定义了一些方法（添加到购物车和从购物车中删除）。我无法让 addToCart 函数工作：

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

const ShoppingCartContext = React.createContext();

export function useShoppingCart() {
    return useContext(ShoppingCartContext);
}

export function ShoppingCartProvider({ children }) {
    const [shoppingCart, setShoppingCart] = useState([]);

    function addToCart(item) {
        setShoppingCart(shoppingCart.concat(item));
    }

    function removeFromCart(item) {
        const index = shoppingCart.indexOf(item);
        setShoppingCart(shoppingCart.splice(index, 1));
    }

    const value = { shoppingCart, setShoppingCart, addToCart, removeFromCart };

    return (
        <ShoppingCartContext.Provider value={value}>
            {children}
        </ShoppingCartContext.Provider>
    );
}

在我要访问购物车的文件中，我这样做：

const { shoppingCart, setShoppingCart, addToCart, removeFromCart } = useShoppingCart();

然后，在 useEffect() 中，我正在这样做：

addToCart(["item"])
console.log(shoppingCart)

但它 console.logs 一个空数组：

【问题讨论】：

状态变化是异步的，所以要查看“shoppingCart”的值，请使用“addToCart”中的回调函数

标签： reactjs jsx react-context react-state react-state-management

【解决方案1】：

所以，假设 useEffect 在您的子组件初始渲染后被调用，会发生以下情况

addToCart(["item"])  // context state is [], a rerender with the new state is scheduled
console.log(shoppingCart) // context state is [], an empty array is logged

在此之后，状态更新并且您的子组件重新呈现。如果您将 console.log 移到组件主体，您将看到更改


const MyShoppingCartConsumingComponent = () => {
  const { shoppingCart, setShoppingCart, addToCart, removeFromCart } = useShoppingCart();
  
  React.useEffect(() => {
     addToCart(['item'])
  }, [])

  console.log(shoppingCart)

  return <p>yo!</p>
}

这样的事情会被记录下来


[]
['item']

【讨论】：

谢谢，成功了！