I heard that every good student will have a wrong topic, probably this is the gap between me and the big guy…

All right, that’s it. Here we go

About the failure to update the state using useState

While working on my own small project (I can dig goldwater articles when I’m done, wow hahaha, I’m a genius), I’m ready to Hook the project. As a result, I encountered this problem as soon as I got started. At first there was no problem when we updated the number of clicks according to the official writing method, everything seemed normal. But when it comes to writing, the problem arises.

I used the table in Ant Design in the project and wanted to delete an item in the table by clicking the delete event. The code is roughly as follows:

const [dataSource, setDataSource] = useState<Array<IDataSource>>([]);
const deleteUser = (id: string) => {
         letnewData = dataSource; / *! Yes, the code to delete the data in the array is so plain and true, if there is a better way to do it please teach me */ in the comments sectionfor (let i = 0; i < newData.length; i++) {
            const element = newData[i];
            if (element.id === id) {
                newData.splice(i, 1);
                break;
            }
        }
        console.log(newData)
        setDataSource(newData) console.log(DataSource)} <Table dataSource={dataSource} />Copy the code

As I just said, I put the Table component in the child component, which made me wonder if I was wiring the component wrong. However, I do not add criteria to the subcomponent to determine whether it is rendered or not. If the parent component renders, the child component will render if it is not set to prevent rendering. Is this about me?

const [dataSource, setDataSource] = useState<Array<IDataSource>>([]);
const deleteUser = (id: string) => {
        for (let i = 0; i < newData.length; i++) {
            const element = newData[i];
            if (element.id === id) {
                newData.splice(i, 1);
                break;
            }
        }
        console.log(newData)
        setDataSource(newData)
        console.log(dataSource)
    }
 useEffect(()=> {
     console.log(dataSource)
 },[dataSource])
 <Table  dataSource={dataSource} /> 
Copy the code

UseEffect is a variable that triggers the useEffect method when the variable changes.

However, the result was a smack in my face…… It has no trigger method….. PSST… I shouldn’t. The data is really updated. The scalp is tingling.

Let newData = dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource = new dataSource

Then I suddenly found a thing —— I am really a silly, which have so create a new object, it is not a pointer to the object to assign the value of the past, it is a ghost new object oh.

Then, I changed the code to look like this:

  const deleteUser = (id: string) => {
        for (let i = 0; i < dataSource.length; i++) {
            const element = dataSource[i];
            if (element.id === id) {
                dataSource.splice(i, 1);
                break; }}setDataSource([...dataSource])
    }
Copy the code

This finally is the update, well, such a simple question took me an hour, of course, there may be a little late last night to write, the state is not very good, yes, it must be so, otherwise how could I make such a stupid mistake ~

Okay, you’re really good for me for finishing my first blog post. Give you thumbs up for seeing this

Just to summarize a little bit

In fact, the idea of returning a new object came to me when I was watching Redux. I heard about returning a new object and returning a new object every day. I didn’t quite understand why. In a similar case, when we declare an object through const, we might think (at least I did before….) Objects declared by const should not be able to be changed

const a = {
    b: 1
}
a.b = 2
Copy the code

This code should have reported an error, but it did, and b did become a 2.

const a = {
    b : 1
}
a = {}
Copy the code

But if you write it this way, you’re going to get an error, because const just doesn’t let the pointer to the object change.

JS does not do deep comparison, does not carefully compare whether the object has changed, the purpose of doing so may be to save performance costs. (If there is an accurate answer, I suggest to tell the comment section, THX).

Ok, this is the end of the first blog, although it took a long time, but still a little bit of enrichment, wahahahaha.