反应 - onChange 事件 / setState答案

【问题标题】：React - onChange event / setState反应 - onChange 事件 / setState
【发布时间】：2019-12-24 12:53:35
【问题描述】：

我试图做一个过滤项目的功能，我遇到了以下代码：

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

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

【问题讨论】：

大概 filterItems 是一种方法吧？你读过the API docs on setState吗？

标签： javascript reactjs onchange setstate

【解决方案1】：

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

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

将 setState() 视为更新组件的请求而不是立即命令。

setState() 的第二个参数是一个可选的回调函数，一旦 setState 完成并重新渲染组件，就会执行该回调函数。通常我们建议使用 componentDidUpdate() 来代替此类逻辑。

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

【讨论】：

好的，谢谢您的回答。我发现componentDidUpdate() 在我看来要好得多。
@grecdev 确实，完全取决于用例。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

setState() 的第二个参数是一个可选的回调函数，将在setState 完成并重新渲染组件后执行。通常我们建议使用componentDidUpdate() 来代替这种逻辑。（另见docs）。

setState 异步工作。 React 将累积状态更改请求，并在可能的情况下执行它们。在那里，当您致电setState 时，您将不知道您的状态何时真正改变。因此，您可以为setState 提供一个回调，该回调在更改完成时执行。

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

【讨论】：

【解决方案4】：

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

【讨论】：