时间戳

首页 > 解决方案 > ReactJS - 在状态下输入所有数据后，将我的加载更改为 false

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

问题描述

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

我想创建一个 Web 工作流程，如下所示：

  1. state在loading条件设置为 true的情况下创建
  2. 我想使用 3 个 JSON 文件axios并将它们保存到state.
  3. 如果所有三个数据都已成功保存到 astate中，则更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
    })
  }

这是我在 while console.log()-ing 状态中找到的屏幕截图render() 在加载所有数据之前，state.loading 已被声明为 false

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

标签： javascriptreactjs

解决方案

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

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

推荐阅读