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

Posted 2021-03-30

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

我的代码看起来像

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

答案

你可以将这样的承诺链接起来

componentDidMount() {
   this.setState({ isLoading: true}); // start your loader

   this.props.fetchA()
   .then(() => {
     return this.props.fetchB();
   })
   .then(() => {
     return this.props.fetchC()
   })
   .then(() => {
     this.setState({ isLoading: false }); // Once done, set loader to false
   })
   .catch(error => {
     console.log('Oh no, something went wrong', error);
   });
}

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

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