React中点击触发嵌套对象数值意外减2而非减1的问题排查

可能的原因 #

• 浅拷贝导致引用共享：你用{ ...dhomatFirebase[0] }只做了第一层拷贝，嵌套的muajt、datatDhomat等对象仍和原dhomatFirebase[0]共享引用。修改状态对象时会同步修改原数据，下次更新时基于已经减过1的原数据再减1，最终表现为一次点击减2。
• 状态更新逻辑位置错误：你把数值修改逻辑放在了useState的初始化函数里，这个函数仅在组件挂载时执行一次。如果点击事件没有正确调用setNewDhomatData更新状态，反而可能重复触发初始化逻辑，或是复用了被修改过的原数据。
• 循环次数不符合预期：检查ditQendrimiArray.length是否为2，如果数组长度是2，循环两次会让数值直接减2，和你描述的现象完全匹配。

修复步骤 #

1. 改用深拷贝处理嵌套对象 #

浅拷贝无法复制嵌套层级的对象，必须用深拷贝切断引用关联。可以用JSON.parse(JSON.stringify())（适合无函数、Symbol等特殊类型的对象），或者第三方库如lodash.cloneDeep。

2. 将更新逻辑移至点击事件的状态更新函数中 #

useState的初始化函数仅执行一次，正确做法是在点击事件里调用setNewDhomatData，并基于前一次状态进行更新：

// 初始化状态（仅组件挂载时执行）
const [newDhomatData, setNewDhomatData] = useState(() => {
  // 初始化时也要深拷贝原数据，避免修改原对象
  return JSON.parse(JSON.stringify(dhomatFirebase[0]));
});

// 点击事件处理函数
const handleDecrease = () => {
  setNewDhomatData(prev => {
    // 深拷贝前一次状态
    const updatedData = JSON.parse(JSON.stringify(prev));
    // 执行减1逻辑
    for (let i = 1; i <= ditQendrimiArray.length; i++) {
      updatedData.muajt[muaj].datatDhomat[`dat${i}`][dataForSpecific.dhoma] -= 1;
    }
    return updatedData;
  });
};

3. 校验循环次数 #

确认ditQendrimiArray.length是否符合业务需求。如果只需要减1一次，那数组长度应该为1；如果确实需要循环整个数组，那当前逻辑是正确的，只是之前误解了预期效果。

额外注意 #

避免直接修改原数据dhomatFirebase，始终基于状态的前一次值更新，确保状态的不可变性，这是React状态管理的核心原则。

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