我正在使用 TMDB，并尝试显示评分最高的电影的图片（海报），但什么都没显示。我在控制台中检查是否有元素，结果有，但什么都没显示。我按照此视频进行了说明，但我不知道为什么它对我不起作用： https://www.youtube.com/watch?v=sZ0bZGfg_m4

这是我当前的代码：

App.js：

import {useEffect, useState} from 'react';
import './App.css';
import Movie from './components/Movie';

//due to it being a demo project I will not safe keep the API
const API ="https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=89eef3426d167c3c8145a257ebe68357&page=1";
const SEARCH_API="https://api.themoviedb.org/3/search/movie?api_key=89eef3426d167c3c8145a257ebe68357&query=";
const TOP_RATED_API="https://api.themoviedb.org/3/movie/top_rated?api_key=89eef3426d167c3c8145a257ebe68357&page=1"

function App() {
  const [movies, setMovies] = useState([]);

useEffect(()=>{
  fetch(TOP_RATED_API)
  .then((res)=>res.json())
  .then((data)=>{
    console.log(data);
    setMovies(data.result);
  });

},[]);

  
 
  return <div>{movies?.length > 0 && movies.map((movie)=>
  <Movie key={movie.id} {...movie}/>
  )}</div>
  
 
}

export default App;

和 Movie.js：

import React from "react";
const IMG_API="https://image.tmdb.org/t/p/w500/";

const Movie =({title, backdrop_path, vote_average})=>
(
    <div>
        <img src={IMG_API+backdrop_path} alt={title}/>
    </div>
);


export default Movie;

将 App.js 中的最后一部分 ->

return <div>{movies?.length > 0 && movies.map((movie)=>
      <Movie key={movie.id} {...movie}/>
      )}</div> 

更改为此（删除电影后的 ?）

return <div>{movies.length > 0 && movies.map((movie)=>
          <Movie key={movie.id} {...movie}/>
          )}</div>

它显示错误：

TypeError: Cannot read property 'length' of undefined

任何帮助都很好，提前谢谢：D