useContext - 当我在孩子中设置状态时，我的父母不会呈现答案

【问题标题】：useContext - my parent does not render when i set state in the childuseContext - 当我在孩子中设置状态时，我的父母不会呈现
【发布时间】：2021-09-14 07:05:05
【问题描述】：

我不太擅长 react js。我只是想创建一个“全局值”，让那个父级的孩子看到这个值，所以我找到了 useContext 允许共享值。所以我想使用 (useState) 所以我可以从子级设置它，这样它就可以在我的父级中单独呈现，但似乎不起作用..它改变了值但没有在父级中呈现它（我是如何计算出来的..在运行时，我更改了值，然后删除了 <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>
  );
}

我在这里有什么遗漏吗？

【问题讨论】：

标签： reactjs state setstate use-context

【解决方案1】：

首先导出您的“上下文”，例如

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

然后将其导入您想要使用的地方

import { videoIDContext } from './dir';

【讨论】：

我收到了这个错误videoIDContext.setVideo is not a function，当我在 vsCode 中支持它时，它说 ..Property 'setVideo' does not exist on type 'Context<{ video: string; setVideo: () => void; }>' 知道为什么吗？

【解决方案2】：

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

这个数组没有方法setVideo。要么在调用 useContext 时破坏数组：

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

或者你用一个对象填充上下文：

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

【讨论】：

【解决方案3】：

所以我找到了答案，我的视频 ID 在孩子中成功接收但没有渲染，所以我需要做的是像这样在我的视频显示中添加 Key

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

所以当这个键改变时，它会单独重新渲染

【讨论】：