Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

javascript - When does React's setState change the state

I have a function open() in a child component which calls the parent's function open() through props, and it could be multiple times in a row.

the parent function contains this line

this.setState({numOpen: (++this.state.numOpen)});

This line works and updates the state at every increment.

But before, this line

this.setState({numOpen: (this.state.numOpen + 1)});

skipped over several increments and was breaking the program.

Does setState get called asynchronously? if not, what could be the reason for it?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

As the Duplicate answer by @MayankShukla indicates, setState is asynchronous,

however Adding an explanation and a corrected approach

In the below case:

this.setState({numOpen: (++this.state.numOpen)});

You are mutating the state directly and then setting the value and hence it works, but is not the right way to do it

In the second case

this.setState({numOpen: (this.state.numOpen + 1)});

setState is adding the value to the current state as you experience it leads to unexpected behaviour due to its asynchronous nature.

The correct way to do it is to use the prevState callback approach

 this.setState((prevState) => ({numOpen: (prevState.numOpen + 1)});

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...