Question

在我的应用程序组件中，我提取了几个东西，所以有几个动作。这是一个国家组成部分。当其中一个操作结束 isLoading 属性更改为false并且屏幕加载消失时。但它不能正常工作，因为一个动作可能比另一个动作花费更长时间。完成所有isLoading操作后，如何将async属性更改为false？

我的代码看起来像

componentDidMount() {
  this.props.fetchA();
  this.props.fetchB();
  this.props.fetchC().then(() => {
    this.setState({isLoading: false})
  })
}

Answer 1

你可以将这些承诺链接起来

constructor () {
   super();
   this.state = {
     isLoading: false,
   };
   this.onLoadData = this.onLoadData.bind(this); // see what I did here, i binded it with "this"
}

componentDidMount() {
   this.onLoadData(); // Call you async method here
}

async onLoadData () {
   this.setState({ isLoading: true}); // start your loader
   try {
     const awaitA = await this.props.fetchA();
     const awaitB = await this.props.fetchB();
     const awaitC = await this.props.fetchC();
     this.setState({ isLoading: false }); // Once done, set loader to false
   } catch (e) {
     console.log('Oh no, something went wrong', error);
   }
}

或者使用带有try catch的async / await做一些像这样的事情。

{{1}}

在反应加载屏幕中保持几个动作

1 个答案: