代码之家 › 专栏 › 技术社区 › Sangram Badi

嵌套的AXIOS调用未更新ReactJS的状态

axios asynchronous reactjs ajax javascript

Sangram Badi · 技术社区 · 5 年前

这里我尝试从嵌套的AXIOS调用中获取数据。它能从两个AXIOS调用中得到响应。

但我无法更新第二个AXIOS呼叫中的奖品池。可以有人帮我吗

getAllLeague() {
    axios.get(BASE_URL + 'leagues').then((response) => {
        var arrData = [];
        for(var i=0; i<response.data.length; i++) {

            var data = {
                "leagueid": response.data[i].leagueid,
                "description": response.data[i].description,
                "itemdef": response.data[i].itemdef,
                "name": response.data[i].name,
                "tournament_url": response.data[i].tournament_url,
                "prize_pool" : ''
            }

            axios.get(BASE_URL + 'getTournamentPrizePool/' + response.data[i].leagueid).then((response) => {
                data.prize_pool = response.data.prize_pool;
            }).catch((error) => {
                console.log(error);
            });
            arrData.push(data);
        }

        console.log(arrData);
        this.setState({
            leagueList : arrData
        });
    }).catch((error) => {
        console.log(error);
    });
}

2 回复 | 直到 5 年前

Giang Le 5 年前

原因

 this.setState({
      leagueList : arrData
    });

将在第二个AXIOS完成之前运行。试试这个。使用Promise.All更干净。希望它能帮助你。

getAllLeague() {
  axios.get(BASE_URL + 'leagues').then((response) => {
    const promises = response.data.map(item => {
      const formData = {
        "leagueid": response.data[i].leagueid,
        "description": response.data[i].description,
        "itemdef": response.data[i].itemdef,
        "name": response.data[i].name,
        "tournament_url": response.data[i].tournament_url,
        "prize_pool" : ''
      }
      const url = BASE_URL + 'getTournamentPrizePool/' + item.leagueid

      return axios.get(url).then(res => {
        return {
          ...formData,
          prize_pool: res.data.prize_pool,
        }
      }).catch((error) => {
        console.log(error);
      })
    })
    Promise.all(promises).then(arrData => {
      this.setState({
        leagueList : arrData
      });
    })
  }).catch((error) => {
    console.log(error);
  });
}

Sangram Badi 5 年前

这是答案。在内部AXIOS中调用API时需要使用异步并等待。

getAllLeague() {
        axios.get(BASE_URL + 'leagues').then(async (response) => {
            var arrData = [];
            for(var i=0; i<response.data.length; i++) {

                var data = {
                    "leagueid": response.data[i].leagueid,
                    "description": response.data[i].description,
                    "itemdef": response.data[i].itemdef,
                    "name": response.data[i].name,
                    "tournament_url": response.data[i].tournament_url,
                    "prize_pool" : ''
                }

                await axios.get(BASE_URL + 'getTournamentPrizePool/' + response.data[i].leagueid).then((response) => {
                    data.prize_pool = response.data.prize_pool;
                })

                arrData.push(data);
            }

            console.log(arrData);
            this.setState({
                leagueList : arrData
            });
        }).catch((error) => {
            console.log(error);
        });
    }