Javascript 在同一函数中等待设置状态

我的反应函数有问题， 当我的主要功能完成时，会触发另一个。 所以我依赖于这个函数直到状态被更新才结束。 我能做什么

 _toggleIsCollapsed = () => {
    const { isBlocked } = this.state;
    if (isBlocked) {
      console.log('blocked');
    }
    this.setState(
      prevState => ({ isCollapsed: !prevState.isCollapsed }),
      () => {
        console.log('isCollapsed: ' + this.state.isCollapsed);
        console.log('done1');
      }
    );
    // Always this line is fired first
    console.log('done2');
  };

我想要达到的结果是：

// done1 
// done2

您可以将setTimeout（）放在取决于setState中正在更改的状态的代码部分

我用的是你想让done1在done2之前来

_toggleIsCollapsed = () => {
    const { isBlocked } = this.state;
    if (isBlocked) {
      console.log('blocked');
    }
    this.setState(
      prevState => ({ isCollapsed: !prevState.isCollapsed }),
      () => {
        console.log('isCollapsed: ' + this.state.isCollapsed);
        console.log('done1');
      }
    );
    // Always this line is fired first
    setTimeout(() => console.log('done2'), 200)
  };

---

您可以在

setState

完成后执行函数，并在

callback

中调用第二个参数，如：

================伪码=========

this.setState({
    title1: 'updated title 1'
}, () => {
    console.log(this.state.title2, 'titl2')
});

---

由于setState是异步的，因此需要此行为

从你的问题来看，我看不出你有什么理由不能这么做：

_toggleIsCollapsed = () => {
    const { isBlocked } = this.state;
    if (isBlocked) {
      console.log('blocked');
    }
    this.setState(
      prevState => ({ isCollapsed: !prevState.isCollapsed }),
      () => {
        console.log('isCollapsed: ' + this.state.isCollapsed);
        console.log('done1');
        console.log('done2'); // move this here
      }
    );
  };

如果您希望函数仅在状态更新（done1已记录）后执行其他操作，则可以执行以下操作：

handleAfterStateChanged = () => {
     // do more stuff here
     // this will only be called after the state is updated
 }

 _toggleIsCollapsed = () => {
        const { isBlocked } = this.state;
        if (isBlocked) {
          console.log('blocked');
        }
        this.setState(
          prevState => ({ isCollapsed: !prevState.isCollapsed }),
          () => {
            console.log('isCollapsed: ' + this.state.isCollapsed);
            console.log('done1');
            this.handleAfterStateChanged();
          }
        );
      };

---

将状态更新后要执行的所有操作移到回调中？是的，setState不会立即设置状态，它会将状态更改排入队列。@DaveNewton我想知道更好的解决方案。。我不是在挖苦你，但这对我的代码库有帮助。如果你有一些东西必须在下一次渲染之前执行，并且依赖于将来在任意时间更新的状态，那么它就属于回调函数。超时将触发得太早或太迟。