反应 - onChange 事件 / setState

Question

I tried to make a filter items functionality and I encountered the following code:

handleChange = e => this.setState({ [e.target.data.inputType]: e.target.value }, this.filterItems);

What is the purpose of the second argument filterItems when I use setState ?

Answer 1

Think of setState as an asynchronous operation, if you need to do something after the state changes you should put it in the second parameter callback.

In this example the code inside the condition may not be reached:

// Assuming isReady initial value is false.
this.setState({
 isReady: true
});

//At this moment this.state.isReady is probably still falsy.
if (this.state.isReady) { ... }

To be sure, you need to pass the code in the (After state) callback. With this, you guarantee your code will only be executed once the new state takes effect.

// Assuming isReady initial value is false.
this.setState({
 isReady: true
}, () => {
  // React calls this function when the updates are applied.
  // Which means we are sure isReady have the new value.
  if (this.state.isReady) { ... }
});

Check the docs for more pieces of information:

Think of setState() as a request rather than an immediate command to update the component.

The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.

https://reactjs.org/docs/react-component.html#setstate

Answer 2

The second argument is a callback that invoked after the state object is changed(since setState is async).

this.setState({someState...}, () => console.log('someState is changed'))

If you need to preform some action after the state is changed It's better if you you use componentDidUpdate or useEffect hook in React ^16.7

Answer 3

React's setState method takes an optional second argument, which is a callback:

The second parameter to setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead. (also see the docs ).

setState works asynchronously. React will accumulate state change requests, and execute them when it can. There, when you call setState , you won't know when your state actually changes. For this reason, you can provide setState with a callback which is executed when the changes are complete.

Or better yet, use componentDidUpdate , which is called by React whenever the state changes.

Answer 4

the setState second argumend is a callback. That means when you use handleChange function, the function filterItems will run afer set state of the input.