React - onChange 事件/setState

Question

我试图使筛选项功能正常，但遇到了以下代码：

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

当我使用 setState 时，第二个参数 filterItems 的目的是什么？

Answer 1

React 的 setState 方法有一个可选的第二个参数，它是一个回调：

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 异步工作。 React 将累积状态更改请求，并在可能时执行它们。在那里，当你调用 setState 时，你不会知道你的状态何时真正改变。因此，您可以为 setState 提供一个回调，该回调会在更改完成时执行。

或者更好的是，使用 componentDidUpdate，只要状态发生变化，React 就会调用它。

Answer 2

setState 第二个参数是回调。这意味着当您使用 handleChange 函数时，函数 filterItems 将运行输入的设置状态。

Answer 3

第二个参数是在状态对象更改后调用的回调（因为 setState 是异步的）。

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

如果你需要在状态改变后执行一些操作在 React 中使用 componentDidUpdate 或 useEffect 钩子会更好 ^16.7

Answer 4

认为setState是一个异步操作，如果你需要在状态改变后做一些事情，你应该把它放在第二个参数回调中。

在此示例中，可能无法达到条件中的代码：

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

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

当然，您需要在（After state）回调中传递代码。有了这个，你保证你的代码只会在新状态生效后执行。

// 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) { ... }
});

查看文档以获取更多信息：

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

React - onChange 事件/setState

React - onChange event / setState

javascript

onchange

setstate

reactjs