我目前正在構建一個應用程式，用戶可以在其中搜索大量電影，然后可以選擇將它們添加到收藏頁面中。
目前，我在按下收藏按鈕后設法構建了一系列電影，但沒有將它們推送到收藏夾的下一頁。
在解決此問題的程序中，我將不勝感激任何提示和技巧！
應用程式.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;
主頁.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;
收藏夾.js
import React from "react"
const Favourites = () => {
return (
<>
<h1>Favourites</h1>
</>
)
}
export default Favourites;
uj5u.com熱心網友回復：
除非您使用 API 或后端來存盤收藏夾，否則如果您僅依賴狀態，這是不可能的。
由于組件狀態在卸載后立即被清除。
如果您的應用程式是純粹的前端，并且您可以將資料存盤在用戶的瀏覽器中，我建議使用localStorage
uj5u.com熱心網友回復：
我建議您將喜歡的電影推送到 localStorage。通過這樣做，您可以在最喜歡的頁面上使用該資料，當用戶關閉瀏覽器并再次回傳時，他仍將保存他選擇的電影。
使用背景關系還允許您通過組件傳遞資料，但在用戶離開站點后它將被清除。
uj5u.com熱心網友回復：
如果您使用Link或history切換到另一個路由，您可以傳遞一個state在 URL 中不可見但可從目標路由訪問的。
例如，您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;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/485325.html
上一篇：在ReactNative中使用onMouseEnter在影像上方添加文本
下一篇：ReactNative：條件視圖