在一个反应状态下存储多个 api 调用

Question

我有多个 api 返回相同类型的数据，但来自不同的区域，但数据类型相同，只是值不同，我想将它们全部存储在一个反应状态.

所以我有这个状态：

  let [infoData1, setInfoData1] = useState({ infoData1: [] });
  let [infoData2, setInfoData2] = useState({ infoData2: [] });

并且 axios 调用：

function multipleApiCall() {
    const headers = {
      "X-Api-Key": "the-api-key-00",
    };
    axios.get(
        "http:url-to-data/ID1",
        { headers }
      )
      .then((response) => {
        setInfoData1(response.data);
        return axios.get(
          "http:url-to-data/ID2",
          { headers }
        )
      })
   .then(response => {
      setInfoData2(response.data);
  })
}

之后我想使用 .map() 来列出结果，但是因为我有 2 个状态，所以我无法将它们连接起来。那么我怎样才能让这两个 api 的所有数据处于一种状态或另一种方法中呢？

Answer 1

const [infoData, setInfoData] = useState([]);

const headers = {
    "X-Api-Key": "the-api-key-00",
};

const urls = ["http:url-to-data/ID1", "http:url-to-data/ID2"];

function multipleApiCall() {

    const promises = urls.map(url => axios.get(url, { headers }));

    Promise.all(promises).then(responses => {
        let data = [];

        responses.forEach(response => {
            data = data.concat(response.data);
        });

        setInfoData(data);
    });
}

在一个反应状态下存储多个 api 调用

store multiple api calls in one react state

javascript

api

ecmascript-6

reactjs

axios

在一个反应​​状态下存储多个 api 调用

store multiple api calls in one react state

javascript

api

ecmascript-6

reactjs

axios

在一个反应状态下存储多个 api 调用