一个关于useEffect和多个useState的问题

Question

我有这段代码可以监听购物车 useContext 中的更改，并且它应该使组件与购物车中的更改保持同步，因为它来自 API

    const [isInCart, setIsInCart] = useState({
        quantity: undefined
    })
    const [qtyCounter, setQtyCounter] = useState()

    useEffect(() => {
        const productInCart = cart.cartItems.map((item) => item).find((item) => item.productId === product._id)
        if (productInCart) setIsInCart({ quantity: productInCart.quantity });
        if (isInCart.quantity) setQtyCounter(isInCart.quantity)
        console.log("1st", productInCart);
        console.log("2nd", isInCart);
        console.log("3rd", qtyCounter);

    }, [cart]

这是每当我尝试更改购物车值时的输出

控制台日志

我知道这缺少很多关于我的代码的上下文，但我认为这些是与我的问题相关的代码

一旦我观察到控制台中的日志，我就通过删除不必要的变量来修复它（我也不记得为什么添加这些变量）

    useEffect(() => {
        const productInCart = cart.cartItems.map((item) => item).find((item) => item.productId === product._id)
        if (productInCart) setQtyCounter(productInCart.quantity);
        if (!productInCart) setQtyCounter(0)

    }, [cart])

但问题仍然萦绕在我的脑海中，为什么 useEffect 的行为会像多个 useState 那样？

Answer 1

简而言之，当您调用

setIsInCart

时，状态更新不会立即发生 - 出于性能原因，React 会批量进行状态更新。正如您所说，这些变量不是必需的，但如果将来出于任何原因您想在状态更改后添加一些操作，您可以使用另一个

useEffect

:

useEffect(() => {
  const productInCart = cart.cartItems.find(item => item.productId === product._id);
  if (productInCart) {
    setIsInCart({ quantity: productInCart.quantity });
  }
}, [cart]);

useEffect(() => {
  if (isInCart.quantity) {
    setQtyCounter(isInCart.quantity);
  }
}, [isInCart]);