I am working with a REACT class component. This is simplification of my situation.
This is the state of my component.
public state = { companies: previous }
This is my saveChanges function that updates the state.
private onSaveCompany = async (updated) => {
this.setState({ companies: updated });
}
So, obviously, I want to update the company property of my state.
I click Save Changes button that initializes the onSaveCompany function. And this is what happens.
The component re-renders four times. And these are the values of the company property during each render.
previous
updated
previous
previous
The good news that my state gets updated. But it gets updated only during the second re-render. But that is not a problem. The problem is that the the value of the state property company is changed again during following re-render. It gets change from updated back to the previous value.
In summery, i have not succeeded to update the value of my state.
The component that I am working with is huge. It has more than 800 lines. In addition to that, it has many child components.
My question is. How do I debug this? Is there some methodology I can use? I read something about React Developer tools.