[英]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.