从 React 中的状态获取单个数据

Question

我正在尝试制作一个页面来显示每个视频的详细信息。
我从后端获取了多个视频数据并将它们存储为全局状态。如果我通过应用程序内的 link 转到页面，则此代码有效。但是如果我从浏览器重新加载或打开URL目录，它无法加载单个视频数据。

我应该怎么做才能使这项工作正常进行？

谢谢

单个视频页面

import { useState, useEffect, useContext } from "react";
import { useParams } from "react-router-dom";
import { VideoContext } from "../context/videoContext";

const SingleVideo = () => {
  let { slug } = useParams();

  const [videos, setVideos] = useContext(VideoContext);
  const [video, setVideo] = useState([]);

  useEffect(() => {
    const result = videos.find((videos) => {
      return videos.uuid === slug;
    });
    setVideo((video) => result);
  }, []);

  return (
    <>
      <div>
        <h1>{video.title}</h1>
        <p>{video.content}</p>
        <img src={video.thumbnail} alt="" />
      </div>
    </>
  );
};
export default SingleVideo;

上下文

import React, { useState, createContext, useEffect } from "react";
import Axios from "axios";
import { AxiosResponse } from "axios";

export const VideoContext = createContext();

export const VideoProvider = (props) => {
  const [videos, setVideos] = useState([]);

  const config = {
    headers: { "Access-Control-Allow-Origin": "*" },
  };
  useEffect(() => {
    //Fetch Vidoes
    Axios.get(`http://localhost:5000/videos`, config)
      .then((res: AxiosResponse) => {
        setVideos(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <VideoContext.Provider value={[videos, setVideos]}>
      {props.children}
    </VideoContext.Provider>
  );
};

Answer 1

我认为原因是因为当您刷新应用程序时，您会在上下文中获取视频数据，并且您的单个视频页面组件上的 useEffect 在您收到这些数据之前运行。

要解决此问题，您只需稍微修改单个视频组件中的 useEffect 即可在收到这些数据时进行更新：

useEffect(() => {
  if (videos.length) {
    const result = videos.find((videos) => {
      return videos.uuid === slug;
    });
    setVideo((video) => result);
  }
}, [videos]);

从 React 中的状态获取单个数据

Get single data from state in React

reactjs

use-context