大家好，提前感谢这个伟大的社区。

我已经使用 ReactJS 创建了一个 Web 应用程序，该应用程序从 API 获取 JSON，在本例中是一个包含特定电影所有详细信息的电影数据库，到目前为止，一切运行正常。

当 Web 应用程序尝试读取特定电影没有的数据时（在本例中，并非所有电影都有烂番茄评级），它会崩溃，我解构了对象以赋予其默认值，但如果找不到该值，它仍然会崩溃，有人可以指出我正确的方向吗？

export default function MovieDetail(props) {
  const imdbId = props.location.detailsProps;
  const [favorited, setFavorited] = useState(false);

  const [details, setDetails] = useState({
    Runtime: '',
    Year: '',
    Rated: '',
    Title: '',
    Ratings: [{
      Source: '',
      Value: '',
    },
    {
      Source: '',
      Value: '',
    },
    ],
    Plot: '',
    Actors: '',
    Genre: '',
    Director: '',
  });

  useEffect( ()=>{
    apiCall();
  }, [] );

  const showFavorite = (e) => {
    setFavorited(true);
  };

  const apiCall = async () => {
    const url = 'http://www.omdbapi.com/?i='+imdbId.id+'&apikey=536a34c3';
    console.log(imdbId.id);


    const response = await axios.get(url)

        .then((response) => setDetails(response.data));
  };
  if (!details) return null;

  return (
    <div className="body">
      <div className="logo">
        <img src={logo} alt="logo" />
      </div>
      <Link to="/" className="Link">
        <img src={arrow} alt="arrow" />
      </Link>
      <div className="runtime">
        <h1>{details.Runtime}</h1>
        <p>.</p>
        <h1>{details.Year}</h1>
        <p>.</p>
        <h2>{details.Rated}</h2>
      </div>
      <div className="title">
        <h1>{details.Title}</h1>
      </div>

      <div className="rottenImdb">
        <img src={imdbLogo} alt="imdbLogo" />
        <h2>{details.Ratings[0].Value}</h2>
        <img src={rottenLogo} alt="rottenLogo" className="rotten"/>
        <h2>{details.Ratings[1].Value}</h2>
      </div>

      <div className="favorite" onClick={showFavorite}
        style={{visibility: favorited ? 'hidden' : ' '}}>
        <img src={favoriteHeart} alt="heart"/>
        <h2>Add to favourites</h2>
      </div>

      <div className="favorited" onClick={showFavorite}
        style={{visibility: favorited ? 'visible ' : 'hidden'}}>
        <img src={favoritedHeart} alt="heart"/>
        <h2>Added</h2>
      </div>

      <div className="plot">
        <h1>Plot</h1>
        <h2>{details.Plot}</h2>
      </div>
      <div className="technical">
        <div className="cast">
          <h1>Cast</h1>
          <h2>{details.Actors}</h2>
        </div>

        <div className="genre">
          <h1>Genre</h1>
          <h2>{details.Genre}</h2>
        </div>

        <div className="director">
          <h1>Director</h1>
          <h2>{details.Director}</h2>
        </div>
      </div>
      <div className="poster">
        <img src={details.Poster} alt="poster" />
      </div>
    </div>

  );
}