Question

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

 _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

Answer 1

你可以在代码中放置一个setTimeout（），它取决于setState中正在改变的状态

我正在使用你想在done2之前完成1

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

Answer 2

您可以在setState完成后执行一个函数，并在callback中调用第二个参数，如：

============伪代码=========

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

Answer 3

此行为是预期的，因为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
      }
    );
  };

如果您希望该功能仅在更新状态（记录完成1）后才执行其他操作，则可以执行以下操作：

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

在同一函数中反应等到设置状态

3 个答案: