即使在错误处理之后，我的react应用程序也会崩溃.为什么会发生这种情况

Question

我创建了一个react组件，该组件将在从TMDb API获取详细信息后显示电影详细信息。该应用程序运行良好，但有一个条件我正在努力处理，即当找不到电影时。在这种情况下，我想我的背景是白色的，而不是电影海报。我想要同样的东西，标题，概述，评级等。我已经使用了三元运算符。

然而，我的应用程序仍然崩溃了这个：-

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop_path')
at HeroArea 

这是我的代码：-

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 HeroArea

Answer 1

简单的答案是，因为movie是未定义的，所以您无法访问其属性。

您需要确保movie设置在任何其他设置之前，例如：

const backdropImage = movie.backdrop_path !== null 
? { backgroundImage:`url(https://image.tmdb.org/t/p/original/${movie.backdrop_path})` } 
: {backgroundColor : "white"};

成为

const backdropImage = movie && 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>
</>
)

成为

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;