useContext - 当我在 child 中设置状态时，我的 parent 不呈现

Question

我不太擅长 React js.. 我只是想创建一个“全局值”让 parent 的 child 看到那个值所以我发现 useContext 允许一起分享价值观。所以我想使用 (useState) 所以我可以从 child 中设置它，这样它就可以在我的 parent 中单独呈现，但似乎不起作用..它改变了值但不在 parent（我是怎么弄明白的.. 在运行时，我更改了值，然后删除了 <Home video = {video}/> 并再次放它以显示我的视频）

这是代码

const videoIDContext = React.createContext({
  video:"",
  setVideo: () => {}
});

function UserMain() {
  const [video, setVideo] = useState("");
  return (
    <Grid container direction="column" style={{ height: "100%" }}>
    
//some code
       <videoIDContext.Provider value = {[video,setVideo]}>
        <Home video = {video}/>
       </videoIDContext.Provider >

    </Grid>
  );
}


function Home({ video, data, reel, Tips, upload }) {
  return (
//some code

        <Grid item xs="12" md="5" justify="space-around" 
          alignItems="center">
          <UploadElements />
        </Grid>

      <Grid
        container
        item
        xs={12}
        justify="space-evenly"
        alignItems="stretch"
        style={{ margin: "10px" }}
        spacing={2}
      >
        <MainVideo videoSrc={video} videoName="Nature" />

      </Grid>
  );
}

function UploadElements() {

  let videoContext1 = useContext(videoIDContext)

  const submit = async event => {
    event.preventDefault()
// (postVideoAndPpt) this function used to send data to my back end and save my video path in my data base it works fine 
    const resultVideo = await postVideoAndPpt({ppt: file , video: videoFile, Name: Name});
    console.log(resultVideo);
    videoContext1.setVideo(resultVideo.videoPath)
    setVideos([resultVideo.video, ...videos])
    // console.log(pptFiles);
    // console.log(videos);
  }

  return (
<div className="floatingDiv" style={{ height: "200px" }}>
  <form onSubmit={submit} style={{ width: "100%" }}>
       // my inputs  works fine .. just to summarize it its 2 input of type file that user
       // can upload video in it 

   </form>

 </div>
  );
}

我在这里遗漏了什么吗？

Answer 1

首先像

一样导出你的“上下文”

const videoIDContext = React.createContext({
          video:"",
          setVideo: () => {}
        });
         
        export { videoIDContext };

然后将它导入到您想要使用它的地方，例如

import { videoIDContext } from './dir';

Answer 2

您正在调用 videoContext1.setVideo()，但您使用数组 <videoIDContext.Provider value = {[video,setVideo]}> 填充了上下文。

这个数组没有方法setVideo。要么在调用 useContext:

时破坏数组

let [video, setVideo] = useContext(videoIDContext);

或者您使用对象填充上下文：

<videoIDContext.Provider value = {{video,setVideo}}>

Answer 3

所以我找到了答案，我的视频 ID 在 child 中成功接收但没有呈现，所以我需要做的是像这样在我的视频显示中添加密钥

<video key={videoSrc} className="video" width="100%" controls>
     <source src={videoSrc} type="video/mp4" />
</video>

因此，当此键更改时，它会单独重新呈现

useContext - 当我在 child 中设置状态时，我的 parent 不呈现

useContext - my parent does not render when i set state in the child

state

setstate

reactjs

use-context