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

时间:2018-05-26 04:36:40

标签: javascript reactjs

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

 _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

3 个答案:

答案 0 :(得分:0)

你可以在代码中放置一个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)
  };

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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