在父上下文中反应使用上下文值

Posted 2023-04-14

【中文标题】在父上下文中反应使用上下文值

【英文标题】：react use context value inside a parent context

【发布时间】：2021-02-03 03:15:42

【问题描述】：

我的 app.js 文件中有 2 个上下文：

function App() 
  return (
      <AuthContext>
        <ChildContext>
         <Template />
        </ChildContext>
     </AuthContext>
  );

当用户注销时，我想访问 ChildContext 内的值，但 logout 函数在 AuthContext 内：

// inside AuthContext:
const myContext = useContext(ChildContext);
const logout = () => 
  // doing some stuff..
  //
  // here is the problem:
  console.log(myContext.some_value);

错误是：

cannot read property 'some_value' of undefined

这是因为ChildContext 在AuthContext 之后声明。 那么我怎样才能在AuthContext 中到达some_value？

【参考方案1】：

在 React 中 data flows down，所以你的选择是：

ChildContext 成为 AuthContext 的父母。 将 logout 函数移动到自己的上下文中

function App() 
  const logout = () => 
    /*...*/
  ;
  return (
    <LogoutContext value=logout>
      <AuthContext>
        <ChildContext>
          <Template />
        </ChildContext>
      </AuthContext>
    </LogoutContext>
  );

【讨论】：

在您的回答的帮助下，我使用了选项 2 并制作了一个带有“/logout”路由的单个组件。并在其中编写注销逻辑。谢谢