Блог

Я успешно извлекаю данные из фильма внутри 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 при обновлении страницы, так как оно не является постоянным.

Вы должны использовать другой метод, чтобы сохранить эту информацию, даже если пользователь обновит страницу. Вот варианты:

• В базе данных. Может сработать, если пользователь находится за аутентификацией (паролем для входа). Пример пользователя name: Paul , id; 3131 , действительно нажал на кнопку «подключиться». В вашей базе данных вы добавляете столбец в таблицу User под названием userConnect = true
• В URL-адресе. Как только пользователь нажмет на кнопку «подключиться», вы измените URL React router -адрес . Например , 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)