React使用useContext时子组件修改state父组件未触发重渲染问题求助

问题根源 #

你遇到的问题核心是 Context默认值结构与Provider实际传递的value结构不匹配，导致你在子组件调用的setVideo实际是初始化时定义的空函数，没有触发父组件UserMain的状态更新，自然不会触发重渲染。

具体对应代码的问题点：

• 创建videoIDContext时，默认值为对象结构：{video:"", setVideo: () => {}}
• 但在videoIDContext.Provider中传递的value是数组结构：value={[video,setVideo]}
• 子组件UploadElements中调用videoContext1.setVideo时，拿到的videoContext1实际是Provider传递的数组，不存在setVideo属性，最终执行的是Context默认值里的空函数，父组件状态完全没有被更新。

修复方案 #

两种方案任选其一即可，核心是保证Context默认值和Provider传递的value结构完全一致：

方案1：统一使用对象结构（无需修改子组件调用逻辑） #

修改UserMain组件中Provider的value为对象，和默认值结构对齐：

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

方案2：统一使用数组结构 #

首先修改Context创建时的默认值为数组结构：

const videoIDContext = React.createContext(["", () => {}]);

再修改UploadElements组件中Context的取值逻辑，按数组下标取值：

const [video, setVideo] = useContext(videoIDContext)
// 提交时直接调用setVideo即可
setVideo(resultVideo.videoPath)

额外检查项 #

如果修复后视频仍未正常刷新，可以检查MainVideo组件是否正确响应videoSrc属性的变化，部分封装的视频播放器组件不会主动监听属性更新，可以给组件加key强制刷新：

<MainVideo key={video} videoSrc={video} videoName="Nature" />

内容的提问来源于stack exchange，提问作者Zeyad Alaa Eldin