React中更新draw状态时element数组意外同步变更的问题求助

嘿，我太懂你遇到的这个坑了！刚学React状态管理的时候，很多人都会栽在引用类型的状态上～

问题根源 #

你之所以会遇到修改draw数组时element也跟着变的情况，本质是JavaScript引用类型的特性：数组属于引用类型，当你直接把element赋值给draw相关的变量时，并没有创建一个新的数组，只是让新变量和element指向了内存里的同一个数组实例。所以你对draw做的任何修改，其实都是在修改那个共享的数组，自然element也会跟着变化。

解决办法 #

核心思路就是：在生成随机移位的数组前，先创建原element数组的独立副本，再对副本进行操作，最后更新draw状态。这样两个数组就完全独立，不会互相影响了。

具体代码示例

假设你之前的错误写法类似这样（直接操作原数组引用）：

// 错误写法：修改的是原element数组的引用
const handleShuffle = () => {
  let shuffledArr = element; // 只是指向原数组，没有创建新数组
  // 随机打乱逻辑
  for (let i = shuffledArr.length - 1; i > 0; i--) {
    const randomIdx = Math.floor(Math.random() * (i + 1));
    [shuffledArr[i], shuffledArr[randomIdx]] = [shuffledArr[randomIdx], shuffledArr[i]];
  }
  setDraw(shuffledArr);
};

改成下面的正确写法，先创建原数组的浅拷贝：

// 正确写法：先创建原数组的独立副本
const handleShuffle = () => {
  // 用扩展运算符创建原数组的浅拷贝，得到全新的数组
  let shuffledArr = [...element];
  // 也可以用 element.slice() 或者 Array.from(element)，效果一样
  
  // 随机打乱逻辑，现在操作的是独立的副本
  for (let i = shuffledArr.length - 1; i > 0; i--) {
    const randomIdx = Math.floor(Math.random() * (i + 1));
    [shuffledArr[i], shuffledArr[randomIdx]] = [shuffledArr[randomIdx], shuffledArr[i]];
  }
  setDraw(shuffledArr);
};

额外说明 #

如果你的数组里存储的是复杂对象（不是数字这种简单值类型），那浅拷贝就不够用了，需要用深拷贝来确保对象也完全独立。比如可以用JSON.parse(JSON.stringify(element))，或者专门的工具函数（比如lodash的cloneDeep）。不过你的场景是数字数组，浅拷贝就完全能解决问题啦～

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