React useState() 同源双状态同步修改、重置功能失效问题求助

JavaScript中对象、数组属于引用类型，直接赋值、浅拷贝操作只会复制内存地址指针，不会生成独立的新数据副本。你的代码存在两处引用共享问题：

• 初始化阶段：budgetData、data、dataBackup三个变量的数组元素均指向同一批对象的内存地址，没有做数据隔离。
• 数据修改阶段：handleChange中仅对数组做了浅拷贝[...data]，数组内的行对象依然是共享引用，修改selectedData[row][name]时会同时改动data和dataBackup中的对应对象，导致备份同步变更、重置功能失效。

按照以下步骤调整即可实现预期的编辑、重置功能：

1. 初始化状态时对原始数据做深拷贝，彻底隔离编辑状态和备份状态的引用：

// 删掉冗余的 const backup = budgetData 代码，直接深拷贝初始化两个状态
const [data, setData ] = useState(JSON.parse(JSON.stringify(budgetData))); 
const [dataBackup] = useState(JSON.parse(JSON.stringify(budgetData))); 

如果你的数据存在function、Symbol等JSON不支持的类型，可以换用其他深拷贝方案，当前场景JSON序列化完全够用。

2. 修改表单更新逻辑，修改行数据时单独拷贝行对象，避免直接修改原引用：

const handleChange = (e, row) => {
  const {name, value} = e.target;
  setData(prev => {
    const newData = [...prev];
    // 拷贝当前要修改的行对象，生成新的引用
    newData[row] = {
      ...newData[row],
      [name]: value
    }
    return newData;
  })
};

3. 重置逻辑可保留原写法，更稳妥的做法是重置时也对备份做一次深拷贝，避免后续操作意外污染备份：

const handleReset = () => {
  setData(JSON.parse(JSON.stringify(dataBackup)));
};

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