React setState更新后读取旧状态 购物车总价计算异常排查

• 核心原因是React的state更新为异步批处理机制：调用setCart时不会同步修改当前函数闭包内捕获的cart变量值，整个cart_addItem函数执行周期里，cart始终是函数触发时拿到的旧状态，你在setCart后立刻调用calculatePrice(cart)，传入的永远是更新前的旧购物车数据，总价计算自然会滞后一步。
• 额外的不可变更新漏洞：处理重复商品加购时，你只做了数组的浅拷贝，数组内的商品对象仍然是原state的引用，执行newList[indextochange].quantity +=1时直接修改了原state里的商品属性，这也是第二次加购时总价刚好能算出$6.00的直接原因——你在传参给计算函数前，已经把旧闭包里的商品数量偷偷改成2了。
• 对应你观察到的现象逻辑：
  • 第一次加购3美元商品：旧cart是空数组，计算总价为0，和你看到的$0.00一致
  • 第二次加购同商品：旧cart里已有1件该商品，你直接修改原对象把数量改成2，传入计算函数的旧cart里商品数量为2，算出总价$6.00，和你看到的现象完全吻合

有两种合规的修复思路，选其一即可：

方案1：基于新构造的购物车数据直接计算总价 #

不要依赖闭包内的旧cart值，在构造完最新的购物车数组后，直接把新数组传入总价计算函数，同时修复对象浅拷贝的不可变更新问题。
修复后的cart_addItem代码如下：

const cart_addItem = (newItem) => {
  let duplicate = false;
  let indextochange = 0;

  for(let item in cart){
    if(cart[item].id === newItem.id){
      duplicate = true;
      indextochange = item;
    }
  }
  
  let updatedCart;
  if(duplicate===true){
    // 做完整的不可变更新：拷贝数组的同时，拷贝要修改的商品对象
    updatedCart = cart.map((item, idx) => {
      if(idx === Number(indextochange)){
        return {...item, quantity: item.quantity + 1}
      }
      return item
    })
  }else{
    updatedCart = [...cart, {...newItem, quantity: 1}];
  }
  setCart(updatedCart);
  // 直接传入刚构造的最新购物车数据计算价格，不依赖闭包旧值
  calculatePrice(updatedCart);
}

方案2：通过useEffect监听cart变化自动计算总价 #

把总价计算逻辑和加购逻辑解耦，只要cart状态发生变化，就自动触发总价重算，完全避免闭包旧值问题：
首先在组件内引入useEffect：

import React, { useEffect } from 'react'

然后删除cart_addItem里调用calculatePrice(cart)的代码，添加effect监听：

useEffect(() => {
  calculatePrice(cart);
}, [cart])

注意：即使选这个方案，也必须修复之前的对象浅拷贝直接修改原state的问题，否则会引发其他渲染异常。

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