Question

我在函数fetchData中有3个API调用。执行以下代码后，如何将加载状态设置为false：

＆＃13;

componentWillMount() {
  this.setState({ loading: true })
  this.fetchData()
  //after these two calls, I want to set the loading State to false
}

＆＃13;

所有API调用都是承诺
使用React 14.3

Answer 1

如果你正在使用Redux，那么在API调用返回后你可以将你的reducer设置为loading: false。

请参阅for more info

Answer 2

您应该在componentDidMount上进行API调用，因为componentWillMount设置为不推荐使用。

FetchData() {
  APIcalls.then(() => {
     This.setState({ loading: false })
   })
 }

Answer 3

您将使用async-await并使用componentDidMount而不是componentWillMount，因为此方法可能会在react v17中被替换另请查看此问题

Use componentWillMount or componentDidMount lifecycle functions for async request in React

async componentDidMount() {
  this.setState({ loading: true })
  await this.fetchData()
  this.setState({ loading: false });

}

async fetchData() {
    await ApiCall1();
    await ApiCall2();
    await ApiCall3();
}

Answer 4

我使用es6 异步等待功能。在其中，您可以使用 Promise.all 来解决所有承诺。

  fetchData = async () => {
    const a = new Promise((resolve, reject) => {
      setTimeout(() => { console.log('one'); return resolve("done!"); }, 1000)
    });

    const b = new Promise((resolve, reject) => {
      setTimeout(() => { console.log('two'); return resolve("done!"); }, 2000)
    });

    return await Promise.all([a, b]) ? true : false;
  }

在componentDidMount中编写逻辑而不是componentWillMount。你可以使用fetchData函数作为   诺言。之后，您可以根据需要设置状态。

  componentDidMount() {
    this.setState({ loading: true })
    this.fetchData().then((result)=>{
      console.log(result, 'three');
      this.setState({ loading: false });
    });
  }

您可以看到工作示例click here

函数调用后更改加载状态

4 个答案: