React状态数组意外更新：修改临时变量触发setSelectedToppings异常变更

问题根源 #

你遇到的问题是JavaScript对象的引用特性导致的：var a = ww并没有创建新对象，只是让变量a和ww指向同一个内存地址的对象。当你修改a的属性时，实际上是直接修改了原ww对象。如果这个ww对象已经存在于selectedToppings状态数组中，或者后续被添加到数组里，状态里的对象会被意外篡改，自然会让后续校验结果不符合预期。

解决方法 #

核心是创建原对象的副本，修改副本的属性而不是原对象，这样就不会影响到状态数组里的内容。具体操作如下：

• 用对象扩展运算符{...ww}或者Object.assign({}, ww)创建ww的浅拷贝，得到一个全新的对象；
• 对这个新对象进行属性修改；
• 将新对象添加到状态数组中，而不是原ww对象。

修改后的代码 #

const selectToppingSide = (ww, j) => {
    // 创建ww的浅拷贝，避免修改原对象
    var a = {...ww};

    if (j.extraDescription === "FirstHalf") {
      a.PizzaFirstHalf = 1;
      a.PizzaSecondHalf = null;
      a.ExtraPrice = j.extraPrice;
      a.CartExtra_MenuItemExtraID = j.menuItemExtraID;
    } else if (j.extraDescription === "Full") {
      a.PizzaFirstHalf = null;
      a.PizzaSecondHalf = null;
      a.ExtraPrice = j.extraPrice;
      a.CartExtra_MenuItemExtraID = j.menuItemExtraID;
    } else if (j.extraDescription === "SecondHalf") {
      a.PizzaFirstHalf = null;
      a.PizzaSecondHalf = 1;
      a.ExtraPrice = j.extraPrice;
      a.CartExtra_MenuItemExtraID = j.menuItemExtraID;
    }

    if (selectedToppings.length < 1) {
      // 用函数式更新获取最新状态，避免闭包问题，同时添加新对象a
      setSelectedToppings(prevState => [...prevState, a]);
    } 
}

额外优化点 #

• 把多个独立if改成else if，避免不必要的条件判断；
• 使用setSelectedToppings的函数式更新形式（接收prevState参数），确保获取到的是最新的状态值，避免因闭包导致的状态更新异常。

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