Creé un componente de reacción que mostrará los detalles de la película después de obtener los detalles de la API de TMDb. La aplicación funciona perfectamente, pero hay una condición que estoy tratando de manejar, es decir, cuando no se encuentra la película. En ese caso, quiero que mi fondo sea blanco en lugar del póster de la película. Quiero lo mismo para título, descripción general, calificación, etc. He usado un operador ternario para esto.
Sin embargo, mi aplicación todavía falla esto: -
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop_path') at HeroAreaAquí está mi código: -
import React, { useState } from 'react' import MovieDetailModal from '../MovieDetailsModal/MovieDetailModal'; import './HeroArea.css'; function HeroArea({ movie }) { const [displayModal, setDisplayModal] = useState(false); const displayMovieModal = () => setDisplayModal(true); //Default background if movie.backdrop isn't found const backdropImage = movie.backdrop_path !== null ? { backgroundImage: `url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})` } : {backgroundColor : "white"}; return ( <> <MovieDetailModal status={displayModal} movie={movie} setStatus={setDisplayModal} /> <div className="hero-container" style={backdropImage} > <div className="content-width info-container"> <div className="inner-container"> <h1>{movie.title ? movie.title : "No results found!"}</h1> <p>{movie.overview ? movie.overview.substring(0, 250) : ""}...</p> <button onClick={displayMovieModal} className="common-button view-more-button-hero">Display more</button> </div> </div> </div> </> ) } export default HeroAreaLa respuesta corta es, debido a que la película no está definida, no puede acceder a sus propiedades.
Debería asegurarse de que la movie esté configurada antes que cualquier otra cosa, por ejemplo:
const backdropImage = movie.backdrop_path !== null ? { backgroundImage:`url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})` } : {backgroundColor : "white"};SE CONVIERTE
const backdropImage = movie && movie.backdrop_path !== null ? { backgroundImage:`url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})` } : {backgroundColor : "white"};Esto también significa que deberá asegurarse de renderizar este componente solo si la película está configurada. por ejemplo:
return ( <> <MovieDetailModal status={displayModal} movie={movie} setStatus={setDisplayModal} /> <div className="hero-container" style={backdropImage} > <div className="content-width info-container"> <div className="inner-container"> <h1>{movie.title ? movie.title : "No results found!"}</h1> <p>{movie.overview ? movie.overview.substring(0, 250) : ""}...</p> <button onClick={displayMovieModal} className="common-button view-more-button-hero">Display more</button> </div> </div> </div> </> )SE CONVIERTE
if(movie){ return ( <> <MovieDetailModal status={displayModal} movie={movie} setStatus={setDisplayModal} /> <div className="hero-container" style={backdropImage} > <div className="content-width info-container"> <div className="inner-container"> <h1>{movie.title ? movie.title : "No results found!"}</h1> <p>{movie.overview ? movie.overview.substring(0, 250) : ""}...</p> <button onClick={displayMovieModal} className="common-button view-more-button-hero">Display more</button> </div> </div> </div> </> ) } return null;