React可编辑单元格重置：能否无需深拷贝恢复TextField初始值？

我需要实现一个带可编辑单元格的表格，编辑后单元格需满足：

• 点击屏幕其他区域时重置为初始值（本次重点处理该需求）
• 按下回车键时保存修改

目前我用onBlur处理失焦逻辑，但每次重置编辑后的单元格都要通过JSON.parse(JSON.stringify)对newFruits做深拷贝——如果用浅拷贝，修改newFruits时fruits也会被同步修改。想找更简便的方法替代这种繁琐的深拷贝方式。

当前代码示例 #

const [fruits, setFruits] = useState([]);
const [newFruits, setNewFruits] = useState([]);

<TextField
  value={newFruits[index].fruit}
  size="small"
  onBlur={() => handleBlur(index)}
  onChange={(event) => handleChange(event, index)}
></TextField>

const handleBlur = (index) => {
    const blurFruits = JSON.parse(JSON.stringify(newFruits));
    blurFruits[index].fruit = fruits[index].fruit;
    setNewFruits(blurFruits);
};

const handleChange = (event, index) => {
    const updateFruits = JSON.parse(JSON.stringify(newFruits));
    updateFruits[index].fruit = event.target.value;
    setNewFruits(updateFruits);
};

优化方案：用浅拷贝局部对象替代全数组深拷贝 #

你的数据结构中每个元素是仅包含fruit字段的普通对象，完全不需要深拷贝整个数组，只需要对修改/重置的单个对象做浅拷贝即可，既高效又简洁。

1. 优化失焦重置逻辑（handleBlur）

直接基于原始fruits数组，对需要重置的项做浅拷贝，其他项复用原引用：

const handleBlur = (index) => {
  setNewFruits(prevNewFruits => 
    prevNewFruits.map((item, i) => 
      i === index ? { ...fruits[index] } : item
    )
  );
};

2. 优化输入变更逻辑（handleChange）

同样只拷贝需要修改的单个对象，避免全数组深拷贝：

const handleChange = (event, index) => {
  const newValue = event.target.value;
  setNewFruits(prevNewFruits => 
    prevNewFruits.map((item, i) => 
      i === index ? { ...item, fruit: newValue } : item
    )
  );
};

3. 初始化newFruits的优化

如果newFruits是fruits的编辑副本，初始化时也只需浅拷贝每个对象：

useEffect(() => {
  setNewFruits(fruits.map(item => ({ ...item })));
}, [fruits]);

为什么这能解决问题？ #

浅拷贝单个对象（用{ ...item }）已经足够切断和原始fruits中对象的引用关系，修改newFruits里的对象不会影响原始数组。相比JSON.parse(JSON.stringify)，这种方式不仅更简洁，还能避免JSON深拷贝带来的类型丢失问题（比如日期、函数等特殊类型会被错误转换）。

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