Así que estoy llamando a una API y almacenando el resultado en un estado llamado shift y obteniendo el siguiente resultado:
[ { "id": 123, "status": "created", "expected": { "end_time": "2021-10-01", "start_time": "2021-10-01" }, }, { "id": 567, "status": "created", "expected": { "end_time": "2021-09-30", "start_time": "2021-09-30" }, } ]Ahora estoy mapeando este estado de cambio de la siguiente manera:
{shift.map((item: any, key: any) => ( <> <ShiftComponent Name={'name'} StartTime={item.expected.start_time} EndTime={item.expected.end_time} Address={'address'} /> </> ))} Para obtener este name y address , tengo que llamar a otra API usando la identificación de la primera API, por lo que extraje las identificaciones de la primera API en una matriz:
id = ["123", "567"] y luego llamando a la segunda API y almacenando el resultado en estado de value :
for (let i = 0; i < id.length; i++) { ApiCall.get(Url + 'value/' + id[i]) .then(async (resp) => { if (resp) { setValue(resp.data); } else { Alert.alert('Error', resp); } }) .catch((err: any) => { console.log(err); }); }resultado de la segunda api:
{ "address": { "state": "anice state", "city": "nice city", }, "name": "Nice name", "id": "123" } { "address": { "state": "anice state 2", "city": "nice city 2", }, "name": "Nice name 2", "id": "567" } Según el resultado de la segunda API, ¿cómo puedo dar el nombre y la dirección en mi ShiftComponent ? Intenté mapear sobre el shift ya mapeado, pero eso está creando salidas duplicadas e incorrectas.
PD: solo he mostrado 2 resultados de ejemplo en la llamada de mi api, en realidad hay muchos más
Por favor ayuda, no puedo encontrar la solución para esto.
Si realmente necesita llamar a su API por separado para cada id , es posible que desee mover esta llamada a ShiftComponent o envolverla con otro componente que se encargará de la llamada. La forma en que lo estás haciendo ahora contiene un defecto:
for (let i = 0; i < id.length; i++) { // <-- this is a loop ApiCall.get(Url + 'value/' + id[i]) .then(async (resp) => { if (resp) { setValue(resp.data); // <-- this will overwrite state with every API response } else { Alert.alert('Error', resp); } }) .catch((err: any) => { console.log(err); }); } Llamar a setValue en un bucle como este significa que solo retiene la última respuesta de la API. Nuevamente, la solución más simple para esto es hacer una llamada a la API en cada componente secundario. Podría verse algo como esto:
{shift.map((item: any, key: any) => ( <ShiftComponent // make the API call inside this component id={item.id} StartTime={item.expected.start_time} EndTime={item.expected.end_time} /> ))}