在React中将数组从一个页面推送到另一个页面

Question

我目前正在构建一个应用程序，用户可以在其中搜索广泛的电影选择，然后可以选择在收藏页面中收藏它们。

目前，我已经设法在按下收藏按钮后建立了一个电影数组，但不能将它们推到收藏夹的下一页。

我将感谢任何提示和技巧沿着解决这个问题的方式!

App.js

import React from "react";
import Header from "./Header";
import {Route, Routes} from 'react-router-dom'
import Favourites from "./views/Favourites";
import Home from "./views/Home";
import About from "./views/About";
function App() {

return (
<>
<Header />
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/favourites" element={<Favourites />} />
<Route path="/about" element={<About />} />
</Routes>
</div>

</>
)
}
export default App;

Home.js

import React, { useState, useEffect } from 'react';
import SearchField from '../components/SearchField';
import MovieList from '../components/MovieList';
const Home = () => {
const [movies, setMovies] = useState([]);
const [searchInput, setSearchInput] = useState ('')
const [favouriteMovies, setFavouriteMovies] = useState([])
const handleFavourites = (movie) => {
favouriteMovies.push(movie)
console.log(favouriteMovies)
}
const getMovies = async (searchInput) => {
const url = `http://www.omdbapi.com/?s=${searchInput}&apikey=87aa1413`;
const res = await fetch(url);
const resJson = await res.json();
if (resJson.Search){
setMovies(resJson.Search)
} else {

}
};
useEffect(() => {
getMovies(searchInput);
}, [searchInput]);

return ( 
<>
<SearchField searchInput={searchInput} setSearchInput={setSearchInput} />
<MovieList movies = {movies} handleFavourites = {handleFavourites} 
setFavouriteMovies = {setFavouriteMovies}/>

</>
)
}
export default Home;

Favourites.js

import React from "react"
const Favourites = () => {
return ( 
<>
<h1>Favourites</h1>

</>
)
}
export default Favourites;

Answer 1

除非您使用API或后端来存储收藏夹，否则如果您仅依赖于状态，这将是不可能的。

因为组件状态会在卸载后立即被清除。

如果你的应用程序是纯粹的前端，你可以将数据存储在用户的浏览器中，我建议使用localStorage

Answer 2

我建议您将收藏的电影推送到localStorage。通过这样做，您可以在收藏夹页面上使用该数据，当用户关闭浏览器并再次返回时，他仍然会保存他选择的电影。

使用上下文也将允许您通过组件传递数据，但它将在用户离开网站后被清除。

Answer 3

如果您使用Link或history切换到另一条路由，您可以通过在URL中不可见但可从目标路由访问的state。

在你的Home.js中，你可以添加一个按钮，例如:

const history = useHistory();
...
// Within returned tree, add a button:
<button onClick={() => {history.push('/favourites', {movies: favouriteMovies});}}>
Go to favourites
</button>
// or simply a link (don't need history in this case):
<Link to={{pathname: "/favourites", state: {movies: favouriteMovies}}}>
Go to favourites
</Link>

然后，在Favourites.js中，通过:

访问状态

const {state} = useLocation();
const movies = state.movies;