反应上下文挂钩更新后如何触发功能

Posted 2023-03-17

【中文标题】反应上下文挂钩更新后如何触发功能

【英文标题】：How trigger function after react context hook updated

【发布时间】：2021-10-17 00:20:15

【问题描述】：

我正在尝试在 react 的“上下文挂钩”更新后调用一个函数。试了下面的代码：

const MyComponent = () => 
  [context] = useContext(MyContext);
  
  function updateContext():void 
    context = "someNewContext";
  
  
  function anotherFunction():void 
    console.log("success!");
  
  
  useEffect(() => 
    anotherFunction();
  , [context]);
  
  return (
    <button onClick=updateContext>update</button>
  );


export default MyComponent;

【问题讨论】：

反应更新中的上下文挂钩是什么意思？ . react 中的上下文值是一个对象。而且您也不会像在 updateContext 方法中那样直接改变上下文值。我们想在这里实现什么目标？

【参考方案1】：

现在我知道出了什么问题...首先我需要一个带有 useState 的包装器，如下所示：

const App = () => 
  const [context, setContext] = useState("initial value");
  const value =  context, setContext ;

  return (
    <MyContext.Provider value=value>
      <MyComponent />
    </MyContext.Provider>
  );
;

然后在组件上：

const MyComponent = () => 
  context, setContext = useContext(MyContext);

  function updateContext():void 
    setContext("Some new context");
  

  function anotherFunction():void 
    console.log("success!");
  

  useEffect(() => 
    anotherFunction();
  , [context]);

  return (
    <button onClick=() => updateContext()>update</button>
  );


export default MyComponent;