Estoy haciendo un clon de una aplicación de película, pero recibo este error:
"Error de tiempo de ejecución no controlado TypeError: no se pueden leer las propiedades de undefined (leyendo 'longitud')"
import Image from 'next/image' import { useEffect, useState } from 'react' import { baseUrl } from '../constants/movie' import { Movie } from '../typing' interface Props { netflixOriginals: Movie[] } function Banner({ netflixOriginals }: Props) { const [movie, setMovie] = useState<Movie | null>(null) useEffect(() => { setMovie( netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)] ) }, [netflixOriginals]) console.log(movie) return ( <div> <div className='absolute top-0 left-0 h-[95vh] w-screen'> <Image src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`} layout="fill" /> </div> </div> ) } export default BannernetflixOriginals no parece estar definido por usted. Use el encadenamiento opcional para que no se haga referencia a la propiedad length si netflixOriginals no está definido.
useEffect(() => { setMovie( netflixOriginals[Math.floor(Math.random() * netflixOriginals?.length)] ) }, [netflixOriginals])netflixOriginals se puede pasar como nulo. El valor predeterminado de una matriz vacía ayudaría, pero aún debe asegurarse de manejar el caso en el que la matriz no tiene valores, lo que significa que no tiene programas para mostrar.
import Image from 'next/image' import { useEffect, useState } from 'react' import { baseUrl } from '../constants/movie' import { Movie } from '../typing' interface Props { netflixOriginals: Movie[] } function Banner({ netflixOriginals = [] }: Props = {}) { const [movie, setMovie] = useState<Movie | null>(null) useEffect(() => { setMovie( netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)] ) }, [netflixOriginals]) return ( { movie ? <div> <div className='absolute top-0 left-0 h-[95vh] w-screen'> <Image src={`${baseUrl}${movie?.backdrop_path || movie?.poster_path}`} layout="fill" /> </div> </div> : <div>There are no movies</div> ) } export default BannerEs posible que netflixOriginals se pase inicialmente como null . Puede probar una lista válida antes de llamar a setMovie() .
useEffect(() => { if (netflixOriginals?.length) { setMovie( netflixOriginals[Math.floor(Math.random() * netflixOriginals.length)] ) } }, [netflixOriginals]) Esto también evitará que su código llame a setMovie() cuando la matriz esté vacía.
El operador de encadenamiento opcional ( ?. ) evitará que la primera verificación de la propiedad de longitud arroje un error si netflixOriginals no está definido.