我正在尝试使用Reactjs useEffect和useState中的变量“Csize”来增加购物车大小

Question

const [Cart, setCart] = useState([]); const [Csize, setSize] = useState(0);

useEffect(() => {
    setSize(Cart.length);
    console.log("updated size", Csize); // Log the updated size directly
}, [Cart]);

const handleClick = (item) => {
    // Check if the item is already present in the cart
    const isPresent = Cart.some(cartItem => cartItem.id === item.id);
    if (isPresent) {
        return;
    }

    // Update Cart state by adding the new item
    setCart([...Cart, item]);
    console.log(Csize)
}

<Link to="/Cart" className="bikescart"><ShoppingCart color="#ffffff" size={35}/>
<span>{Csize}</span>
</Link>
</ul>

这是 bikes.jsx 文件

我在控制台中得到的是每次我单击“添加到购物车”时，Csize 仍然为 0。 如何解决这个问题？

Answer 1

实际上你正在尝试在更新状态后console.log()， 而 setState() 函数是异步的。这意味着您无法在同一函数（更新状态的位置）内看到状态的更新值，因此如果您想查看 CSize 的更新状态，只需在 useEffect 外部使用 console.log 即可。