React Hooks、API、Axios

Question

我的 axios api 调用有问题，我在同一个函数中使用 2 个 api，这两个 axios 调用单独运行良好，但是当我将它们结合起来时，我将在 Country 组件中遇到错误发布后，错误是（地图不是函数）

const onSerializeData = () => { 
    const serializedCountries = serializeCountries(selectedCountries, false);
    //Print the Countries
    console.log(
      `Selected Countries: \n ${JSON.stringify(serializedCountries)}`
    );
    
    axios
      .get(
        `https://restcountries.eu/rest/v2/alpha/${
          serializedCountries[serializedCountries.length - 1]
        }`
      )
      .then((responose) => {
        const CouAllData = responose.data;
        console.log("CouAllData", CouAllData);
        setCountryAllData([...CountryAllData, CouAllData]);
      })
      .catch((error) => {
        console.log("Error", error);
      });
      axios
      .get(
        `https://corona-api.com/countries/${
          serializedCountries[serializedCountries.length - 1]
        }`
      )
      .then((responose) => {
        const CouData = responose.data.data; //The Data
        setCountryData([...CountryData, CouData]); //set The Data to the OBJ
        console.log(" setCountryData", CountryData);
      })
      .catch((error) => {
        console.log("Error", error);
      });
  };
return (
<div>
<Country countries={CountryData} /> 
      <Country countriesAll={CountryAllData} /></div>
}

国家组成部分

const DataGroup = this.props.countries.map((county) => {
      return <Data info={county} />;
    });

    const DataGroupAll = this.props.countriesAll.map((country) => {
      return <Data infos={country} />;
    });

    return (
      <div>
         {DataGroup}
         {DataGroupAll}
      </div>

数据组件

 <h1>Name : {this.props.info.code}</h1>
        <h1>Date : {this.props.info.updated_at}</h1>
<h1>Name : {this.props.infos.name}</h1>
        <h1>Capital : {this.props.infos.capital}</h1>

Answer 1

尝试使用axios.all() 执行并发请求。

function getCountries() {
  return axios.get(
    `https://restcountries.eu/rest/v2/alpha/${
      serializedCountries[serializedCountries.length - 1]
    }`
  )
}

function getCountries2() {
  return axios.get(
    `https://corona-api.com/countries/${
      serializedCountries[serializedCountries.length - 1]
    }`
  )
}

Promise.all([getCountries(), getCountries2()])
  .then(function (results) {
    const countries = results[0];
    const countries2 = results[1];
  });