javascript - 如何防止我的数组在 React JS 中的 onChange 函数上一次又一次地更新？

Question

我克隆了一个数组，并且有一个 onChange 函数。在调用 onChange 函数时，我的原始数组和克隆数组正在根据更新的 onChange 值进行更新。但我不想更新我的克隆阵列。我该怎么做？

我的代码-

const clonedArray = [...originalArray];

const onChange = (id:number, value: string): void => {
    const arrayData = originalArray;
    
    const selectedData = arrayData.find(
        (data) => data.myId === id
    );
    if (selectedData) {
        // updating my originalArray according to new changed value;
    }
}

这个 onChange 函数也在更新我的 clonedArray。我不想更新我的 clonedArray。我怎样才能做到这一点 ？ useMemo 之类的解决方案是什么？谁能告诉我解决方案？

Answer 1

问题

这个问题是状态对象/数组突变。您正在改变数组中的元素，并在“副本”中看到突变。

首先，const clonedArray = [...originalArray]; 只是 originalArray 的浅拷贝，不是克隆。这意味着除了数组引用本身，clonedArray 中的所有元素仍然引用 originalArray 中的相同元素。

其次，如果稍后您在 originalArray 中进行更改，并且您看到它们出现在 clonedArray 中，那么您肯定是在改变元素引用而不是创建 < strong>新 引用。

解决方案

您正在寻找不可变更新模式。在 React 中更新状态时，不仅需要浅拷贝正在更新的根对象/数组，还需要浅拷贝所有嵌套状态。为了帮助努力，尤其是在更新数组时，您还需要使用功能状态更新，以便您可以从以前的状态正确更新。

为此，我假设(基于 originalArray 处于状态的评论)您的状态看起来像这样:

const [originalArray, setOriginalArray] = useState([]);

更改处理程序/状态更新(只是一个示例，因为我不知道您的确切更新要求)

const onChange = (id: number, value: string): void => {
  const selectedData = originalArray.find((data) => data.myId === id);

  if (selectedData) {
    // updating my originalArray according to new changed value
    // Array.prototype.map shallow copies the array into a new array reference
    setOriginalArray(originalArray => originalArray.map(data => data.myId === id
      ? {               // <-- updating element into new object reference
        ...data,        // <-- shallow copy previous data element
        property: value // <-- update property with new value
      }
      : data            // <-- not updating, pass previous object through
    );
  }
}

一旦您正确地更新了数组元素，那么任何可能也引用状态的东西都不会发生突变。