React JS中如何避免onChange函数触发时克隆数组被意外更新

问题核心原因 #

你遇到的是浅拷贝的引用共享问题：你用[...originalArray]做的是浅拷贝，只会复制数组本身的结构，数组中存储的如果是对象类型的元素，拷贝前后的两个数组会共享同一个对象引用。你修改原数组内对象的属性时，克隆数组指向的是同一个对象，自然会同步更新。 #

解决方案 #

方案1：对数组做深拷贝 #

直接克隆数组的时候就完全复制元素对象本身，彻底切断和原数组的引用关联：

• 若数组元素都是普通可序列化值（无函数、Symbol、循环引用），可以直接用JSON序列化方式实现：

const clonedArray = JSON.parse(JSON.stringify(originalArray));

• 若数组包含复杂类型值，可以引入成熟的深拷贝工具，比如lodash的cloneDeep：

import { cloneDeep } from 'lodash';
const clonedArray = cloneDeep(originalArray);

方案2：修改原数组时使用不可变更新逻辑 #

不需要修改原有的对象属性，而是直接替换原数组中需要更新的元素为全新对象，这样原克隆数组中指向的旧对象不会被改动：

const onChange = (id:number, value: string): void => {
  // 遍历生成新数组，仅替换目标id对应的元素为新对象
  originalArray = originalArray.map(data => {
    if (data.myId === id) {
      // 展开原对象属性，仅修改需要更新的字段，返回全新对象
      return { ...data, 你要更新的字段名: value };
    }
    return data;
  })
}

关于useMemo的使用说明 #

如果你是在React组件中使用该逻辑，克隆操作在组件渲染层执行、会随着组件重渲染重复执行的话，可以用useMemo缓存克隆结果，只有原数组变化时才重新执行克隆逻辑：

import { useMemo } from 'react';

const clonedArray = useMemo(() => {
  // 填入上面的深拷贝逻辑
  return JSON.parse(JSON.stringify(originalArray));
}, [originalArray])

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