Tengo una lista de nombres dentro de una matriz para la que necesito obtener datos.
Mi objetivo es usar un ciclo for que realizará iterativamente una llamada API para cada nombre en la lista, con los datos de cada llamada almacenados en un objeto dentro de una matriz Person ( useState ). Hasta ahora he creado un componente, pero parece que todo el sitio se vuelve defectuoso y funciona mal .
Creo que puede provenir de la forma en que usé el ciclo dentro de useEffect , pero no estoy completamente seguro. ¿Hay un mejor enfoque para implementar el componente a continuación?
function API_CALL(){ const [Person, SetInfo] = useState([ { age:'', occupation:'' } ]) const names = [ "bob", "alice", "jerry", "steve", "tracy", "hank" ] useEffect(() => { for(let i = 0; i <= 5; i++){ fetch('https://api.userfacesite.com/api/v3/data/' + names[i], { headers: { 'Accept': 'application/json', 'Path': '/', } }) .then(response => response.json()) .then(json=> SetInfo([...person, {age:json.person.age, occupation:json.person.occupation}]) ); } },[Person]); return( <div> {JSON.stringify(Person)} </div> ) }Su implementación puede ser mejor con algunos cambios.
Primero, necesita una función para llamar a su API que se puede implementar con useCallback hook o con una función normal fuera de useEffect , también necesita un bloque catch para fallas en la llamada a la API:
function fetchData (name) { fetch('https://api.userfacesite.com/api/v3/data/' + name, { headers: { 'Accept': 'application/json', 'Path': '/', } }) .then(response => response.json()) .then(json=> SetInfo(prevState => ([...prevState, {age:json.person.age, occupation:json.person.occupation}]))) .catch(error => // do a proper action on error case) } Nota: para agregar datos anteriores, use prevState dentro de su setInfo . Ha enfrentado algunos problemas aquí porque cada vez que la matriz de person cambia y provoca, se activa el useEffect de uso.
Nota: use nombres estándar para crear y configurar el estado, también use los mismos nombres:
const [persons, setPersons] = useState() Ahora, es hora de llamar a la función fetchData en su matriz de names :
useEffect(() => { names.forEach(name => fetchData(name)) }, []) // with an empty array of dependencies, the hook will only invoke on component did mount once.Opcionalmente:
Es posible que deba representar la matriz de persons (una matriz de objetos) en la página, el siguiente ejemplo muestra esta implementación de muestra :
return( <div> { persons.map( person => ( <div>Name: {person.name}</div> <p> age: {person.age} </p> // and so on for the rest ... )) } </div> )