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异步不确定性的问题。

为什么会这样？

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);

我不明白为什么我用这种方法得到以前的状态值

1 个答案: