反应状态和购物车的问题

Posted 2023-04-14

【中文标题】反应状态和购物车的问题

【英文标题】：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”中的回调函数

【参考方案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']

【讨论】：

谢谢，成功了！