为什么 setstate 回调函数需要是箭头函数？

Question

take this scenario

this.setState({ number: newNumber}, () => console.log(number))

and then this one:

this.setState({ number: newNumber}, console.log(number))

the first one (with the arrow) correctly logs the new state, the second (without the arrow) seems to console.log it one step behind.

why does the arrow function cause it to be correct in the setState callback?

Answer 1

Because, the second parameter inside setState is a callback function . But this is not a callback:

console.log(number)

Answer 2

Like the first answer, you need a callback function. console.log() is not a callback function if you don't wrap it inside a function.

the second (without the arrow) seems to console.log it one step behind.

Instead of being a callback, console.log() is executed immediately, logs the current value of number variable and passes its return value as the callback argument.

You call console.log(number) at

this.setState({ number: newNumber}, console.log(number))

and passes undefined as a callback. Since console.log() returns undefined. Such that this.setState becomes

this.setState({number: newNumber}, undefined);

this.setState() might have some sort of flag to not execute a callback function in cases where the callback parameter is not supplied (undefined is the same as not being supplied in terms of parameters), which explains why it's not throwing an error at undefined() .