reactjs - OMdb react props.data.map 不是函数

Question

我正在尝试显示来自 OMdb API 的数据，但每次我尝试使用我的方法时都没有任何效果。我想使用 Spline.js 将电影海报显示到滑块上，每当我手动将 JSON 数据放入状态时，我都能成功地做到这一点，但现在我想从 API 获取数据，我遇到了this props.movie.map在外部组件中一直不是功能错误。

这是 CodeSandbox 上的项目，以防万一
https://codesandbox.io/s/github/JojoDuke/reactmoviesapp?file=/src/App.js

应用程序.js

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css"
import MoviesList from "./components/MoviesList";
import ListHeading from './components/ListHeading';
import { SearchBox } from './components/SearchBox';
import AddFavourites from './components/AddFavourites';
import RemoveFavourites from './components/RemoveFavourites';
import MainMovie from './components/MainMovie';
import Navbar from './components/Navbar';
import Footer from './components/Footer';

const App = () => {
  const [movies, setMovies] = useState([]);
  const [searchValue, setSearchValue] = useState("");
  const [favourites, setFavourites] = useState([]);

  // Backup
  // const getMovie = async () => {
  //   const url = 'http://www.omdbapi.com/?i=tt3896198&apikey=ce990560';
  //   const res = await fetch(url);
  //   const data = await res.json();
  //   const responseJson = JSON.parse(data);
  //   setMovies(responseJson);
  // }

  const API_KEY = "91d62f4";
  const url = `http://www.omdbapi.com/?i=tt3896198&apikey=${API_KEY}`;

  const getMovies = async () => {
    try {
      const response = await fetch(url);
        const data = await response.json()
        setMovies(data);
    } catch (e) {
        console.error(e.toString);
    } 
  }
  
  // FUNCTIONS
  useEffect(() => {
    getMovies();
  }, []);

  useEffect(() => {
        const movieFavourites = JSON.parse(
            localStorage.getItem('react-movie-app-favourites')
        );

        if (movieFavourites) {
            setFavourites(movieFavourites);
        }
    }, []);

  const saveToLocalStorage = (items) => {
    localStorage.setItem('react-movie-app-favourites', JSON.stringify(items));
  }

  const addFavouriteMovie = (movie) => {
    const newFavouriteList = [...favourites, movie];
    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }

  const removeFavouriteMovie = (movie) => {
    const newFavouriteList = favourites.filter((favourite) => favourite.imdbID !== movie.imdbID);
    setFavourites(newFavouriteList);
    saveToLocalStorage(newFavouriteList);
  }
  // FUNCTIONS CLOSE

  return (
    <div>
      {/* Navigation Bar */}
      <div>
        <Navbar />
      </div>

      <div className="row d-flex align-items-center mb-5">

        {/* Main Movie Area */}
        <MainMovie/>

        {/* <SearchBox 
          searchValue={searchValue} 
          setSearchValue={setSearchValue}/> */}
      </div>

      {/* Movies List */}
      <ListHeading heading="Trending" />
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      {/* List 2 */}
      <div className="row d-flex align-items-center mt-4 mb-4">
        <ListHeading heading="Cinetime Originals" />
      </div>
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      {/* List 3 */}
      <div className="row d-flex align-items-center mt-4 mb-4">
        <ListHeading heading="Classics" />
      </div>
      <div>
        <MoviesList 
          movies={movies} 
          handleFavouritesClick={addFavouriteMovie} 
          favouriteComponent={AddFavourites}/>
      </div>

      <Footer />
    </div>
  );
};

export default App;

MoviesList.js（我收到错误的地方）

import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
//import '@splidejs/splide/dist/css/themes/splide-default.min.css';

const MoviesList = (props) => {
    //const FavouriteComponent = props.favouriteComponent;

    const movieSplide = props.movies.map((movie, index) => {
        return(
            <SplideSlide>
            <div className="movie-div">
                        <div className="overlay"></div>
                        <img 
                            className="movie-item shadow" 
                            src={movie.Poster} 
                            alt='movie'></img>
            </div>
            </SplideSlide>
        );
    });

    return(
        <Splide options={{
            rewind: false,
            autoWidth: true,
            perPage: 6,
            perMove: 2,
            pagination: false,
            gap: '1em',
            focus: 'center',
            type: 'slide',
            easing: 'ease',
            arrows: true
        }}>
            {movieSplide}
        </Splide>
    );
};

export default MoviesList;