时间戳

首页 > 解决方案 > 如何防止我的数组在 React JS 中的 onChange 函数上一次又一次地更新？

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

问题描述

我已经克隆了一个数组并且我有一个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 什么的解决方案是什么？谁能告诉我解决方案？

标签： javascriptreactjs

解决方案

Issue

This issue is state object/array mutation. You are mutating elements in an array and seeing the mutations manifest in a "copy".

Firstly, const clonedArray = [...originalArray]; is only a shallow copy of the originalArray, not a clone. This means that other than the array reference itself, all the elements in clonedArray still refer to the same elements in originalArray.

Secondly, if later you are making changes in originalArray and you are seeing them manifest in clonedArray then you are definitely mutating the element references instead of creating new references.

Solution

You are looking for the Immutable Update Pattern. When updating state in React it is necessary to shallow copy not only the root object/array that is being updated, but all nested state as well. To help with endeavor, especially when updating arrays, you will want to also use functional state updates so you can correctly update from the previous state.

For this I'm assuming (based on a comment that originalArray was in state) that your state looks something like this:

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

The change handler/state update (just an example since I don't know your exact update requirements)

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
    );
  }
}

Once you are correctly updating the array elements, then no mutations will occur to anything that may also be referencing the state.

推荐阅读