Question

我在 useEffect() 中成功获取了电影的数据。但是，当页面重新加载时，值 comb = pd.merge(DF1, DF2, on=['ID', 'Item'], how='left').rename(columns={'Qty_x': 'DF1_Qty','Qty_y': 'DF2_Qty'}) comb = comb.fillna(0) comb['Qty_new'] = comb['DF1_Qty'] - comb['DF2_Qty'] 消失并在控制台中打印出 404 错误（因为正在使用默认值 const { selectedMovie } = useContext(MoviesContext) 并且正在执行对 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;

这些是我收到的 404 错误：

应该做哪些改变？

Answer 1

确实，当您刷新页面时，React 会丢失状态，因为它不是持久的。

即使用户刷新页面，您也应该使用另一种方法来保留此信息。以下是选项：

在数据库中。如果用户支持身份验证（登录密码），则可以工作。示例用户 name: Paul，id; 3131，确实点击了“连接”按钮。在您的数据库中，您在表 User 中添加一列名为 userConnect = true
在网址中。只要用户点击“连接”按钮，您就可以使用 React router 更改 URL。例如 URL 为 mydomain.com，点击后变为 mydomain.com?clicked=true。如果用户刷新了您的页面，您仍然可以获得有关点击该按钮的用户的信息。
在 cookie 中（点击此处了解更多信息 https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies）
在本地存储中（点击此处了解更多信息https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local）

重新加载页面时，React Context 值消失

1 个答案: