ReactJS-在状态下输入所有数据后，将加载更改为false

Question

在状态中输入所有数据后，我想将state.loading更改为false。

我要创建如下的Web工作流程：

1. state，其loading条件设置为true
2. 我想使用axios提取3个JSON文件并将其保存到state中。
3. 如果所有三个数据均已成功保存到state中，则将state.loading更改为false

但是我得到的是state.loading在所有数据被调用之前被声明为false。

代码如下：

constructor(props) {
    super(props);
    this.state = {
      jobs    : [],
      category: [],
      location: [],
      loading : true
    }
  }

  componentWillMount() {
    window.scrollTo(0, 0);
    //get any jobs available
    axios.get('/thisjob/all/all').then(({data}) => this.setState({
      jobs: [...data.jobs]
    }));
    //get any categories available
    axios.get('/thiscategory').then(({data}) => this.setState({
      category: [...data.category]
    }));
    //get any locations available
    axios.get('/thislocation').then(({data}) => this.setState({
      location: [...data.location]
    }));
    this.setState({
      loading: false
    })
  }

这是我在console.log()的{​​{1}}-ing状态下找到的屏幕截图

我尝试了多种方式，从使用if语句到尝试将其保存到另一个生命周期方法中，但结果仍然不像我要求的工作流程。

Answer 1

您可能想要使用异步等待方法或全部承诺。 一旦所有promy解决，您将setState加载为false。 await Promise.all([someCall(), anotherCall()]); 就像有人指出的那样，在componentDidMount中进行抓取并添加异步

async componentDidMount() {
    const res = await axios.get('/thisjob/all/all');
    const {ip} = await res.json(); // do other logic
    const res1 = await axios.get('/thiscategory');
    const {other} = await res1.json(); // do other logic
    const res2 = await axios.get('/thislocation');
    const {other2} = await res2.json(); // do other logic
    await this.setStateAsync({loading: false})
  }