Error de tipo de React al obtener múltiples puntos finales de la API: TypeError: fetch(…).json no es una función.
Estoy haciendo un proyecto de React.js
. Estoy obteniendo datos de una API y los paso desde el componente padre por props. Además, estoy utilizando diferentes puntos finales de la misma API en este componente hijo. Necesito comparar los “personajes” de las props con los que hay en este nuevo punto final de la misma API. Tengo una función que parece funcionar, pero obtengo dos errores. El primero no siempre, pero a veces en la consola muestra un error 429, demasiadas llamadas a la API. Hice una función setTimeOut que parece haberlo solucionado. Pero ahora tengo otro error en el catch que dice: TypeError: fetch(…).json no es una función. Este es el código:
importar estilos desde './MovieDetail.module.css';
const MovieDetail = ({ película }) => {
const personas = película.properties?.characters.map(async (characterURL) => {
intentar {
const people = esperar fetch(characterURL).json().results;
if (people.ok) {
setTimeOut(() => {
return people;
}, 1000)
};
}
capturar (err) {
console.error('Error personas', err)
}
})
console.log('personas MovieDetail', personas)
volver (
<div className={styles.card}>
<div className={styles.container}>
<h2>{película.properties?.title}</h2>
<p>{película.description}</p>
<p>Fecha de lanzamiento: {película.properties?.release_date}</p>
<p>Director: {película.properties?.director}</p>
<p>Productor: {película.properties?.producer}</p>
<p>Personajes:</p>
{personas?.map(persona=> (
<ul id={styles.list}>
<li>{persona.properties?.name}</li>
</ul>
))}
</div>
</div>
);
}
exportar por defecto MovieDetail;
Este es todo el código en sandbox.
Gracias de antemano.
davy.ai
Solución:
Error 429: Demasiadas llamadas a la API
El error 429 indica que estamos realizando demasiadas solicitudes a la API en un corto período de tiempo. Para solucionar este problema, podemos usar la función
setTimeout
para retrasar la ejecución de cada solicitud. En el código proporcionado, podemos ver que ya se ha agregado un retraso de 1000ms a cada solicitud utilizandosetTimeout
.Sin embargo, debemos tener en cuenta que esta es solo una solución temporal y no definitiva. Un enfoque mejor sería almacenar en caché los datos de la API para no tener que realizar llamadas repetidas.
TypeError: fetch(…).json no es una función
El error
TypeError: fetch(...).json no es una función
ocurre porque el métodofetch
devuelve una promesa que se resuelve en el objeto de respuesta, no en los datos JSON que queremos.Para obtener los datos JSON, primero debemos verificar si la respuesta es correcta y luego usar el método
json()
de la respuesta para extraer los datos.Aquí está el código corregido:
En el código actualizado, definimos una nueva función
fetchData
para obtener los datos de la API. Usamos esta función para obtener los datos de cada URL de personaje en la funciónfetchPeoples
utilizandoPromise.all
para resolver todas las promesas simultáneamente.Luego, usamos los hooks
useState
yuseEffect
para establecer el estadopeoples
con los datos obtenidos. Finalmente, recorremos el arreglopeoples
para renderizar el nombre de cada personaje en una lista desordenada.