为什么我不能将我最喜欢的项目保存在 localStorage 中？

Question

我的钩子 useEffect 上的 setFavourites 函数不起作用……我想知道我的 localStorage 有什么问题吗……顺便说一句，控制台在“props.movi​​es.map((movie, index) => < div className = " image-container d-flex justify-content-start m-3" > '有谁知道出了什么问题请帮帮我！非常感谢！

这是我的 App.js：

import React, { useState, useEffect } from 'react';
import "bootstrap/dist/css/bootstrap.min.css"
import "./App.css"
import MovieList from "./components/MovieList"
import MovieListHeading from "./components/MovieListHeading"
import SearchBox from "./components/SearchBox"
import AddFavourites from "./components/AddFavourites"
import RemoveFavourites from "./components/RemoveFavourites"



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

    const getMovieRequest = async(searchValue) => {
        const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=fa369c28`

        const response = await fetch(url)
        const responseJson = await response.json()

        if (responseJson.Search) {
            setMovies(responseJson.Search)
        }


    }

    useEffect(() => {
        getMovieRequest(searchValue)
    }, [searchValue])

    useEffect(() => {
        const movieFavourites = JSON.parse(localStorage.getItem('react-movie-app-favourites'))
        setFavourites(movieFavourites)
    }, [])

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

    const addFavouritesMovie = (movie) => {
        const newFavouriteMovieList = [...favourites, movie]
        setFavourites(newFavouriteMovieList)
        saveToLocalStorage(newFavouriteMovieList)
    }

    const removeFavouriteMovie = (movie) => {
        const newFavouritesMovieList = favourites.filter(
            (favourite) => favourite.imdbID !== movie.imdbID);

        setFavourites(newFavouritesMovieList)
    }

    return ( < div className = 'container-fluid movie-app' >
        <
        div className = 'row d-flex align-items-center mt-4 mb-4' >
        <
        MovieListHeading heading = "Movies" / >
        <
        SearchBox searchValue = { searchValue }
        setSearchValue = { setSearchValue }
        / > < /
        div > <
        div className = 'row' > <
        MovieList movies = { movies }
        handleFavouritesClick = { addFavouritesMovie }
        FavouriteComponents = { AddFavourites }
        />< /div >

        <
        div className = 'row d-flex align-items-center mt-4 mb-4' >
        <
        MovieListHeading heading = "Favourites" / >
        <
        /
        div >

        <
        div className = 'row' > <
        MovieList movies = { favourites }
        handleFavouritesClick = { removeFavouriteMovie }
        FavouriteComponents = { RemoveFavourites }
        />< /div >




        <
        /div>
    )
}

export default App;

这是我的 MovieList.js：

import React from 'react'


const MovieList = (props) => {
        const FavouriteComponents = props.FavouriteComponents
        return ( < div > {
                props.movies.map((movie, index) => < div className = "image-container d-flex justify-content-start m-3" >
                    <
                    img src = { movie.Poster }
                    alt = "movie" / >
                    <
                    div onClick = {
                        () => props.handleFavouritesClick(movie)
                    }
                    className = "overlay d-flex aglign-items-center justify-content-center" >
                    <
                    FavouriteComponents / >
                    <
                    /div> < /
                    div >
                )
            } < /div>)
        }


        export default MovieList;