Esto es lo que veo en mi localhost
Aquí está mi código
import React, { useState, useEffect } from 'react' import axios from './axios' import './Row.css' const base_url = "https://image.tmdb.org/t/p/original/" function Row({ title, fetchUrl }) { const [movies, setMovies] = useState([]); useEffect(() => { async function fetchData(){ const request = await axios.get(fetchUrl); setMovies(request.data.results); return request; } fetchData(); }, [fetchUrl]) // console.log(movies) return ( <div> <div className="row"> <h2>{title}</h2> <div className="row__posters"> {movies.map(movie => (<img src={`${base_url}${movie.poster_path}`} alt={movie.name} />) )} </div> </div> </div> ) } export default RowParece que no puedo encontrar el problema con la función porque los resultados en los datos que solicito de la API ciertamente no están indefinidos.
Editar
Como referencia, también agregué mi consola aquí para que pueda ver que devuelve la solicitud en el registro, pero el error persiste.
Puedo verlo funcionando por un segundo cuando vuelvo a cargar la página y boom, se ha ido y el error aparece.
Ha indefinido en su consola dos veces después de mostrar el contenido de la solicitud.
También debe colocar un archivo console.log justo después (o antes) de la línea
const request = await axios.get(fetchUrl); useEffect() se llama después de ejecutar el primer render(), por lo que seguramente comenzará con un valor nulo. Y la línea movies.map(...) falla.
Agrega una línea antes de tu devolución() con este código:
console.log("movies: ", movies) if( !movies ) return (<span>loading...</span>) //... return dom contentEs posible que vea (si la respuesta de su servidor es lo suficientemente lenta) el mensaje de la pantalla 'cargando...' antes de llegar a la pantalla de datos.
Intente usar el operador de encadenamiento opcional (?.) y vea qué sucede.
Quería escribir esto como un comentario, pero no tengo suficiente reputación.
Este tipo de error ocurre cuando accede a una propiedad de un objeto que también está indefinido. Como este ejemplo let val = undefined; val.map(v => console.log()) esto devolverá el mismo error que obtienes. Aquí voy a mapear una variable cuyo valor no está definido. De manera similar, de alguna manera, sus películas se asignaron sin definir y luego buscar el mapa devuelve ese error. Por lo tanto, parece que no está asignando correctamente el objeto de respuesta a las películas, está asignando un valor indefinido a las películas, así que verifique los resultados antes de asignarlo a las películas.
const request = await axios.get(fetchUrl); if(request.data && request.data.results){ setMovies(request.data.results); } asegúrese de que request.data.results sea una lista de objetos no indefinidos y verifique que sus películas no tengan valores falsos antes de aplicarle la operación de mapa para evitar errores
{movies? movies.map(): `<p>Loading</p>} Puede verificar request.data consolando console.log(request.data) si devuelve una lista de objetos, luego intente setMovies(request.data) . Siga este blog TypeError no detectado: no se puede leer la propiedad de undefined En JavaScript React: no se puede leer la propiedad 'mapa' de undefined