无论如何可以在反应中同步设置状态

Question

正如我们所知，setState是异步的。我已经读过一些关于setState的问题，关于如何在setState之后使用值，但这些不是我现在需要的。

我正在尝试为数组列表设置值，然后使用该列表执行函数以获取结果的值。如果 setState 不是异步的，那么它会像这样

'

handleChange(e) {
    const resultList = this.state.list.slice();
    resultList[e.target.id] = e.target.value;
    this.setState({
      list: resultList,
      result: this.doSomething(resultList) // this.doSomething(this.state.list)
    });
  }

'

有没有办法做到这一点？要研究的文档或关键字会很棒。非常感谢

Answer 1

有一个回调参数来设置状态，该参数在状态更新后调用

this.setState({
  list: resultList,
  result: this.doSomething(resultList)
}, () => {
    //do something with the updated this.state
});

Answer 2

你可以像这样使用异步等待

     async handleChange(e) {
        const resultList = this.state.list.slice();
        resultList[e.target.id] = e.target.value;
       this.setState({
           list: resultList,
           result: await this.doSomething(resultList) // this.doSomething(this.state.list)
       });
    }

Answer 3

不

鼓励将this.state与this.setState一起使用，这是因为状态更新是异步的，可能会导致争用条件。

如果更新的状态派生自以前的状态，则应使用状态更新程序函数。因为它是异步的，所以应该事先处理事件对象，因为合成事件在 React 中的工作方式：

const { id, value } = e.target;
this.setState(state => {
  const list = [...state.list];
  list[id] = value;
  return {
    list,
    result: this.doSomething(list)
  };
});