javascript - 我不明白为什么我在这个方法中得到了以前的状态值

Question

我在 React 的按钮上有一个事件处理程序。

包含按钮的组件从父级的输入字段中获取一个道具：userInput。

然后它使用它来更新状态：bLength。当我 console.log bLength 时，它是旧值。另外，我尝试将 setTimeout 设置为 3000ms，它会立即运行。

handleClick = e => {
    var { userInput } = this.props;
    this.setState(() => ({
      bLength: userInput,
    }));
    console.log(this.state.bLength);
    setTimeout(console.log(this.state.bLength), 3000);
  }
};

状态bLength最初设置为3。
用户输入6
用户点击按钮
控制台日志3
用户再次点击按钮
控制台日志6。

我认为将函数传递给 setState 可以消除 setState 的异步不确定性问题。

为什么会这样？

标签： javascriptreactjs

Answer 1

setState是异步的，要正确访问最新值，请使用第二个参数，该参数在更新后执行回调。

handleClick = e => {
    var { userInput } = this.props;
    this.setState(() => ({
      bLength: userInput,
    }), () => console.log(this.state.bLength));

  }
};

setTimeout需要一个回调，你只是立即执行它：

setTimeout(() => console.log(this.state.bLength), 3000);