What to do if react array changes are not updated

React array changes are not updated because array assignments in js are passed by reference. The solution is: 1. Open the corresponding react file; 2. Use the spread operator to create a new array and change the memory. Quote; 3. Use "panes.push({key: panes.length,tab: `${panes.length 1}`})" to reassign the value.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What should I do if the react array changes but does not update?

When the attribute of an element of a state array in react changes, the setState page is not updated

During the process of writing code, you will find that if you directly use push and other methods to change the state, it stands to reason In other words, push will change the original array, and the array should be updated, but the rendered state will not change.

The problem I encountered today is: after modifying the array elements in the component, the data changed but the page was not re-rendered

This is because the component failed to recognize the changes in the array, so the page did not Re-rendering

So as long as the component senses that you have changed, you can achieve the refresh effect

Reason:

This is due to the js , the assignment of the array is passed by reference. array.push is equivalent to directly changing the memory block corresponding to the array, but the memory of the array used for comparison within react has not changed and points to the same memory. setState only does shallow compare. Therefore re-render is not triggered.

You can use the spread operator to create a new array and change the memory reference

Requirements:

Solution:Reassignment after deconstruction

const onClick = (key) => {// tab点击函数
    if (key === 'addTab') {
      panes.push({
        key: panes.length,
        tab: `筛选记录${panes.length + 1}`
      })
      setPanes([...panes])
    }
  }

Recommended learning: "react video tutorial"

The above is the detailed content of What to do if react array changes are not updated. For more information, please follow other related articles on the PHP Chinese website!