Tengo varias API que devuelven el mismo tipo de datos pero de diferentes áreas, pero el tipo de datos es el mismo, solo que los valores son diferentes, y quiero almacenarlos todos en un estado de reacción.
Así que tengo este estado:
let [infoData1, setInfoData1] = useState({ infoData1: [] }); let [infoData2, setInfoData2] = useState({ infoData2: [] });y el axios llama:
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); }) } y luego quiero usar un .map() para enumerar el resultado, pero como tengo 2 estados, no puedo concatenarlos. Entonces, ¿cómo puedo tener todos los datos de esas dos API en un solo estado o tal vez en otro enfoque?
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); }); }