当我尝试从tmbd API获取即将上映的电影时，出现错误：
“无法读取未定义的属性（阅读'poster_path'）错误”
下面是我的组件：

import React from "react";
import { useState, useEffect } from "react";

const HeroSection = () =>{
  
  const [upcomingMovies, setUpcomingMovies] = useState([]);
    const getUpcomingMoviestoFeature = () => {
      const options = {method: 'GET', headers: {
        accept: 'application/json',
        Authorization: 'Bearer authorizationkeynumber'
      }};

fetch(`https://api.themoviedb.org/3/movie/upcoming?language=en-US&page=1?api_key=${process.env.REACT_APP_MOVIE_KEY}`, options)
  .then(response => response.json())
  .then(response => 
    // console.log(response.results[0].original_title)
    setUpcomingMovies(response.results)
   
    
    )
    
  .catch(err => console.error(err));
  
    }
    useEffect(() => {
      getUpcomingMoviestoFeature();
  }, []);

    
      {
      if(!upcomingMovies) {
        return (
          <p>Loading</p>
        )
      } else {return (
        <>
      <div className="heroSection">
      <section className="light hero">
        <div className="heroInner">
      
               
                
                
                <img src = {`https://image.tmdb.org/t/p/w500/${upcomingMovies[0].poster_path}`} />
                
        
      
         
         
        
      
        </div>
      </section>
    </div></>
  
    )}
          
       
      }
     
   
    
  };
  
  export default HeroSection;

字符串
我试图添加条件渲染，以确保它不会加载组件，直到数据可用，但没有工作。