关于useEffect与多个useState的异常行为疑问

我写了一段监听cart useContext变化的代码，用来同步API返回的购物车数据更新组件。原本用两个useState（isInCart、qtyCounter）配合useEffect实现，但控制台日志显示状态更新不符合预期。我删掉冗余变量后修复了问题，但还是搞不懂为什么多useState时useEffect会出现这种表现。

原代码 #

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])

问题原因 #

• React的状态更新是异步批量处理的，在同一次useEffect执行周期里，调用setIsInCart后，isInCart并不会立刻变成新值，你后续访问的还是当前渲染周期里的旧状态值。所以紧接着用isInCart.quantity去更新qtyCounter，根本拿不到刚设置的最新数量，自然会导致状态更新不符合预期。
• 另外提一句，代码里的cart.cartItems.map((item) => item)完全是多余操作，map在这里只是复制了一遍数组，直接用cart.cartItems.find(...)就能实现相同效果，没必要多做一次遍历。

修复后代码 #

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

}, [cart])

内容的提问来源于stack exchange，提问作者maestro