[英]React Context value disappears when reloading page
我在 useEffect() 中成功獲取了電影的數據。 但是,當頁面重新加載時,值const { selectedMovie } = useContext(MoviesContext)
消失並且在控制台中打印出 404 錯誤(因為正在使用默認值0
並且正在執行對 API 的錯誤調用)。
這是重新加載的組件:
import {useState, useEffect, useContext} from "react";
import Topbar from '../Header/Topbar';
import { fetchSelectedMovie } from "../../services/movies.service";
import {Grid, Card, CardMedia} from '@material-ui/core';
import noImage from '../../images/no-image-available.png';
import { MoviesContext } from "../../services/context";
import './Pages.css';
const posterBaseUrl = "https://image.tmdb.org/t/p/w300";
interface Genre {
id: number;
name: string;
}
interface Movie {
id: number;
title: string;
vote_average: number;
overview: string;
poster_path?: string;
release_date: string;
budget: number;
revenue: number;
genres: Genre[];
}
const MoviePage = (props: any) => {
const { selectedMovie } = useContext(MoviesContext);
const [movie, setMovie] = useState<Movie>(
{
id: 0,
title: '',
vote_average: 0,
overview: '',
poster_path: noImage,
release_date: '',
budget: 0,
revenue: 0,
genres: [],
}
);
const [movieImg, setMovieImg] = useState<string>(noImage);
useEffect(() => {
const callAPI = async () => {
const fetchedMovieInfo = await fetchSelectedMovie(Number(selectedMovie));
setMovie(fetchedMovieInfo);
setMovieImg(posterBaseUrl+fetchedMovieInfo.poster_path);
}
callAPI();
}, [selectedMovie]);
return (
<>
<Topbar></Topbar>
<Grid container spacing={2} className="container-movie-page">
<Grid item xs={6} sm={3}>
<Card className="card">
<CardMedia
component="img"
alt={"Poster of " + movie.title}
image={movieImg}
title={movie.title}
/>
</Card>
</Grid>
<Grid item xs={6} sm={9} className="align-left">
<h1 className="title">
{movie.title}
</h1>
</Grid>
</>
);
}
export default MoviePage;
使用的反應上下文:
import React from "react";
import { Movie } from "./movies.service";
export const MoviesContext = React.createContext<{
movies: Movie[];
updateMovies: Function;
selectedMovie: number;
setSelectedMovie: (value: number) => void;
}>({
movies: [],
updateMovies: Function,
selectedMovie: 0,
setSelectedMovie: () => {},
});
這些是我收到的 404 錯誤:
應該做哪些改變?
事實上,當您刷新頁面時,由於 React 沒有持久性,State 會丟失。
即使用戶刷新頁面,您也應該使用另一種方法來保留此信息。 以下是選項:
name: Paul
, id; 3131
id; 3131
,確實點擊了“連接”按鈕。 在您的數據庫中,您在名為userConnect = true
的表User
添加一列React router
更改 URL。 例如,URL 是mydomain.com
,點擊后變為mydomain.com?clicked=true
。 如果用戶刷新了您的頁面,您仍然擁有有關單擊該按鈕的用戶的信息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.