Tengo esta función asíncrona que obtiene datos de la API, pero cuando uso los datos, aparece un error de tipo indefinido con la matriz de películas. Pero luego uso "&&" para decirle que si está vacío, no ejecute el bloque, pero aún da el error. Lo he hecho por el operador ternario también pero sigue igual.
Aquí está el gancho de efecto de uso que está obteniendo datos de la API
const [movies, setMovies] = useState([]) useEffect(() => { async function fetchData() { const request = await axios.get(fetchUrl); setMovies(request.data.results); console.log(movies); return request; } fetchData(); }, [fetchUrl]);Y aquí está el código para ese elemento.
{movies && <div id="film-row"> <FilmCard img={`${base_url}${movies[0].poster_path}`} /> <FilmCard img={`${base_url}${movies[1].poster_path}`} /> <FilmCard img={`${base_url}${movies[2].poster_path}`} /> <FilmCard img={`${base_url}${movies[3].poster_path}`} /> <FilmCard img={`${base_url}${movies[4].poster_path}`} /> <FilmCard img={`${base_url}${movies[5].poster_path}`} /> </div> }agregar un ? a tus etiquetas como esta
<FilmCard img={`${base_url}${movies?.[0]?.poster_path}`} />o cambie su representación condicional a:
{películas.duración &&
Puede ser difícil recordar qué valores son forzados a verdadero o falso por JavaScript. En este caso, una matriz vacía ([]) es en realidad un valor "veraz" ( consulte MDN para ver ejemplos ), por lo que sus elementos de FilmCard se procesarán de forma no deseada.
O cambia tu condicional para dar cuenta de esto:
{movies.length && O inicialice movies como un valor "falso":
const [movies, setMovies] = useState(null)Obtengo datos como este:
useEffect(()=>{ (async () => { const request = await axios.get(fetchUrl); setMovies(request.data.results); })() },[fetchUrl])Y debe verificar si las películas no son nulas. en el regreso agregar
{movies.length > 0 && // What you want to do with movies.}