mi problema es sobre la solicitud de axios anidada. El código es muy simple, con el primer axios.get estoy obteniendo la primera parte de los datos y luego usando la respuesta dada estoy tratando de obtener datos del segundo punto final. (código abajo)

 const getData = async () => { let returnSecoundValue = {} try { const response = await axios.get("http://127.0.0.1:8000/firstEndpoint/", { auth: { username: "x", password: "y", }, }); // console.log(response.data) <--- WORKS; response.data.forEach(async element => { const secoundData = await axios.get(`http://127.0.0.1:8000/secoundEndpoint/${element.id}/`, { auth: { username: "x", password: "y", }, }); returnSecoundValue[secoundData.data.id] = secoundData.data }); console.log(returnSecoundValue) <--- WORKS; setMyState({firstEnd: response.data, secoundEnd: empoRet}) } catch (err) { console.error(err); }

Como en el ejemplo anterior, cuando termino de obtener los segundos datos, los guardo en mi estado como un objeto. El primer elemento de un objeto es una matriz de objetos y el segundo es el objeto (utilizado como disco).

Hasta este punto todo está bien, cuando intento y console.log, se muestra perfectamente como quería. El problema comienza cuando intento obtener los datos exactos del segundo elemento.

Con mis datos obtenidos, estoy tratando de hacer algo así:

 myState.firstEnd.map((element) => { try{ console.log(myState); (Works - log all values) console.log(myState.secoundEnd); (Works - log all values of secoundEnd) console.log(myState.secoundEnd[2]); (Return undefind) <Component key={element.id} isActive={element.active} title={element.title}

He intentado hacer eso en algunos enfoques, pero cada vez terminé con el mismo resultado. ¿Hay algún problema con el montaje o es otra cosa?