Estoy creando una aplicación de película simple con moviedb. Recuperé con éxito las 20 películas más populares y las puse en el estado de la aplicación:
constructor(props) { super(props); this.state = { movieInfo: [], } } componentDidMount() { this.getMovies(); } getMovies = async () => { await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=94d4ad026c5009bdaf4aecb8989dfa07') .then(res => this.setState({ movieInfo: res.data.results })) }Sé que la matriz se recuperó correctamente porque cuando observo los componentes de React en las herramientas de desarrollo de Chrome, veo lo que quiero:
Captura de pantalla del estado de la aplicación
Luego, en la parte de procesamiento de la aplicación, quiero pasar el primer elemento de la matriz a un componente llamado Película, que luego mostrará información sobre la película:
return ( <div> <Movie movie={this.state.movieInfo[0]} /> </div> ); }Sé que el componente de la película obtiene esta información correctamente porque veo el objeto que representa la primera película en los accesorios del componente de la película:
Accesorios de componentes de películas
La función Mi película se ve así:
return ( <div> <h1>{props.movie.original_title}</h1> <p>{props.movie.overview}</p> </div> ) }La primera vez que lo compilo esto funciona y veo la información que quiero:
Aplicación renderizada con componente de película
Pero increíblemente, cuando actualizo la página veo el mensaje de error
TypeError: Cannot read properties of undefined (reading 'original_title')¿Cómo es posible que la aplicación transmita correctamente la información a Movie y la muestre correctamente una vez, pero tan pronto como actualizo la página, de alguna manera no está definida?
Gracias de antemano por la ayuda, J.D.
Es posible que deba usar también componentDidUpdate() con componentDidMount():
componentDidMount() { this.getMovies(); } componentDidUpdate() { this.getMovies(); }Supongo que no obtiene un error cuando está desarrollando y cambiando el código. Cuando guarda su código, la recarga en caliente solo cambia las partes que cambiaron.
Esto significa que si su aplicación carga datos y this.state.movieInfo con una matriz de BE, y guarda su código, se recarga en caliente y obtiene nuevos datos. Entonces, this.state.movieInfo[0] siempre está lleno de datos.
Cuando actualiza su aplicación, simplemente se restablece a una matriz vacía cuando la coloca allí en el constructor .
La solución es verificar siempre si existe ese primer elemento en la matriz antes de representar el componente Movie :
return ( <div> {this.state.movieInfo[0] ? <Movie movie={this.state.movieInfo[0]} /> : null} </div> );cuando la página se vuelve a cargar, el estado de inicio es una matriz vacía. debe verificar que la matriz tenga un elemento para representar o no.
return ( <div> {this.state.movieInfo && this.state.movieInfo.length>0 && (<Movie movie={this.state.movieInfo[0]} />)} </div> );