React Contextprovider 强制更新视频元素以播放视频

如何解决React Contextprovider 强制更新视频元素以播放视频

我正在使用像 this 这样的 React Context 并且真的陷入了如何更新我的视频元素（播放视频）的问题。组件不是应该在收到 prop 时自动更新吗？

这是我的代码的简化版本：

import React,{ useState } from "react";
import ReactDOM from "react-dom";
import { Video } from "grommet";

import LanguageContext from "./language-context";
import LanguageSwitcher from "./LanguageSwitcher";

const App = () => {
  const [language,setLanguage] = useState("en");
  const value = { language,setLanguage };
  console.log(language); // shows language on click

  return (
    <LanguageContext.Provider value={value}>
      <h2>Current Language: {language}</h2>
      <p>Click button to change to jp</p>
      <div>
        {/* Can be nested */}
        <LanguageSwitcher />
          <VideoWrapper>
            <Video fit='cover' controls='over'>
                <source key='video' src="example.mp4" type='video/mp4' poster="example.jpg"/>
                   <track
                        srcLang={language}
                        src='//v2.grommet.io/assets/small-en.vtt'
                        default={true}
                    />
            </Video>
          </VideoWrapper>
      </div>
    </LanguageContext.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

和（在我的例子中非常嵌套）子组件

import React,{ useContext } from "react";

import LanguageContext from "./language-context";

const LanguageSwitcher = () => {
  const { language,setLanguage } = useContext(LanguageContext);
  return (
  //  <Component1>
  //    <Component2>
  //      <Component3>
  //        <Component4>
  //          <Component5>
                <button onClick={() => setLanguage("jp")}>
                 Switch Language (Current: {language})
                </button>
  //          </Component5>
  //        </Component4>
  //      </Component3>
  //    </Component2>
  //  </Component1>
  );
};

export default LanguageSwitcher;

语言上下文.js

import React from "react";

// set the defaults
const LanguageContext = React.createContext({
  language: "en",setLanguage: () => {}
});

export default LanguageContext;

到目前为止一切正常，“语言”可以记录到根组件中的控制台，但如果我尝试将其作为参数传递给视频，则不会发生更新。点击后如何启动视频？