Solution to React pure function component setState not refreshing the page update

Problem description:

const [textList, setTextList] = useState(original array);
setTextList(new array);

When modifying the original array, if the original array is a deep array (more than one layer), using setTextList to modify it will not trigger a page refresh

Cause Analysis:

This involves the knowledge of mutable objects and immutable objects. In Vue and React, if you update a mutable object, it may cause the view to update. This is because Vue and React are shallow listeners by default, and only listen to the first layer of data. Changes in the inner layer data will not be monitored.

Solution:

My solution here is to first make a deep copy of the original array, assign it to the new array, then modify the new array and pass the modified new array in, which will cause the view to update.

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

Supplement: In react, useState updates do not render components when hooks are used

When using react and writing components like the one shown in the figure, I found a critical problem. When I choose to write it with class, it is easy to update the rendering through the component.
When I decided to refactor my components using functional component hooks, I found a very difficult problem. When I used onChange to change the value of the parent component, the value was changed, but the component was not re-rendered? ? ? ?
I was confused, so I tried to set the value to empty and then assign it to the class component. I failed, so I tried to look through the life cycle of the hook. . . . ------If it fails, try Baidu---I found the same problem. . . I found that I only needed to add slice() at the end.
So in order to solve the problem first, I changed the red circle in the figure to onChange(value.slice())
-----So, this magical problem was solved.

Now that the problem has been solved, let's go back and see what happened. . .
Looking at the document, I found a sentence that the data in useState must be immutable (non-assignable object)
That is, the state of the ass component also advocates the use of immutable data, but it is not mandatory, because as long as setState is called, it will trigger an update. Therefore, this problem does not occur in the class component, or the update can be triggered by changing it to empty and then assigning a value.
However, when using useState again, if the same object is passed into the update function, the update will not be triggered.
So the solution is to return a new object through slice() to assign the value, which is the key to solving the problem. . . .

The above is the detailed solution to the problem that the setState update page of react pure function component does not refresh. For more information about the react useState page not refreshing, please pay attention to other related articles on 123WORDPRESS.COM!