React 函数的行为不像预期的那样答案

【问题标题】：React function isn't behaving as its expected toReact 函数的行为不像预期的那样
【发布时间】：2019-11-04 09:04:43
【问题描述】：

这是我的 react 应用程序中的一个功能：

handleSubmit(evt) {
  evt.preventDefault();
  this.setState({
    width: "",
    height: "",
    color: ""
  });
  console.log(this.state)
};

在我的输入中，我将输入的值设置为宽度、高度和颜色。这个handleSubmit 函数是在填写表格时发生的。

但是我在console.log 行之前通过setState 设置了状态。因此，这将在调用 console.log 之前替换表单中的值。我应该得到

{width :" ", height :" ", color :" "}

但是，相反，我得到了输入设置的值。但似乎setState 仅在完整功能完成后才有效，而不是在日志之前。为什么？

【问题讨论】：

@Pottay Rudra 你能分享你的组件吗？
reactjs.org/docs/react-component.html#setstate
stackoverflow.com/a/58669497/5124488

标签： javascript reactjs

【解决方案1】：

但似乎 setState 仅在完整功能完成后才起作用，而不是在日志之前。为什么？

setState 不会立即更改状态。参考：https://reactjs.org/docs/react-component.html#setstate

如果您想在状态更改后立即执行某些操作，请使用回调函数。

handleSubmit(evt) {
  evt.preventDefault();
  this.setState({
    width: "",
    height: "",
    color: ""
  }, () => {
    console.log(this.state)
  });
};

【讨论】：

【解决方案2】：

您可以使用函数式 setState 而不是传递对象。相反，您可以将一个函数传递给 setState，该函数将当前状态和 props 作为参数，该函数返回一个对象，该对象将合并到旧状态中。

例如，

this.setState((state, props) => {
    return {
        counter: state.counter + 1
    }
});

对 setState 的调用会排队，然后按照调用顺序执行。当它们被执行时，函数接收最新状态而不是接收旧状态。

【讨论】：