Estoy haciendo un proyecto React.js . Estoy obteniendo datos de una API y los paso desde el componente principal mediante accesorios. Además, estoy usando diferentes puntos finales de la misma API en este componente para niños. Necesito hacer coincidir los "personajes/personas" de los accesorios con los que están dentro de este nuevo punto final de la misma API. Tengo una función que parece funcionar, pero recibo dos errores. El primero no siempre lo es, pero a veces en la consola muestra el error 429 demasiadas llamadas a la API. Hice una función setTimeOut que parece que se resolvió. Pero ahora tengo otro error de la captura que dice: TypeError: fetch(...).json is not a function. Este es el código:
import styles from './MovieDetail.module.css'; const MovieDetail = ({ film }) => { const peoples = film.properties?.characters.map(async (characterURL) => { try { const people = await fetch(characterURL).json().results; if (people.ok) { setTimeout(() => { return people; }, 1000) }; } catch (err) { console.error('Error peoples', err) } }) console.log('peoples MovieDetail', peoples) return ( <div className={styles.card}> <div className={styles.container}> <h2>{film.properties?.title}</h2> <p>{film.description}</p> <p>Release date: {film.properties?.release_date}</p> <p>Director: {film.properties?.director}</p> <p>Producer: {film.properties?.producer}</p> <p>Characters:</p> {peoples?.map(people=> ( <ul id={styles.list}> <li>{people.properties?.name}</li> </ul> ))} </div> </div> ); } export default MovieDetail;Este es el código completo en sandbox . Gracias por adelantado.
Intente esperar la llamada json() por separado.
Además, agregue una matriz de estado para almacenar los datos para mostrar y llamar a la función de fetch en un useEffect :
const [people, setPeople] = useState([]); const getPeoples = () => { film.properties?.characters.map(async (characterURL) => { try { const response = await fetch(characterURL); const data = await response.json(); if (data.results.ok) { // Add new people to `people` array setPeople((oldPeople) => [...oldPeople, ...data.results]); } } catch (err) { console.error('Error peoples', err); } }); }; useEffect(() => { getPeoples(); }, [film]);Revisé tu código y hay algunos errores que estás cometiendo.
El primero es: está pasando sus accesorios llamados films de su componente principal y obteniendo una film en su componente secundario.
así que cambia esto en tu ItemContainer/index.jsx
return <MovieDetail key={film?.properties?.episode_id} film={film} />;y el segundo es: también debe esperar su json:
así que cambia esto en tu MovieDetail/Index.jsx
const peoples = film?.properties?.characters.map(async (characterURL) => { try { const response = await fetch(characterURL); const people = await response.json().results; if (response.ok) { setTimeout(() => { return people; }, 1000); } } catch (err) { console.error("Error peoples", err); } });