为啥子组件中未定义上下文？

Posted 2023-04-14

【中文标题】为啥子组件中未定义上下文？

【英文标题】：Why is Context undefined in child component?为什么子组件中未定义上下文？

【发布时间】：2022-01-12 11:06:33

【问题描述】：

我正在尝试学习 React 和上下文。

在以下示例中，我的控制台在 app.js 中正确记录了用户（当前已设置），但在 RequireAuth 组件（及其子组件）中未定义日志。

我可能可以将 user 和 setUser 作为 props 传递并让它们工作，但目标是了解发生了什么问题并学习如何正确使用上下文。

感谢您的帮助！

userContext.js

import React,  createContext, useContext, useState  from "react";

const UserContext = createContext();

export function useAuth() 
    return useContext(UserContext);


const UserProvider = ( children ) => 
    const [state, setState] = useState(undefined);

    return (
        <UserContext.Provider value=[state, setState]>
             children 
        </UserContext.Provider>
    );


export default UserProvider;

app.js

import React from 'react';
import  BrowserRouter as Router, Route, Routes  from 'react-router-dom';

// Components
// [...]

// Auth Components
import RequireAuth from './requireAuth';

// Context
import UserProvider from './userContext';
import  useAuth  from './userContext';

function App() 

  return (
    <Router>
      <UserProvider>
        <Main />
      </UserProvider>
    </Router>
  );


function Main() 
  const [ user, setUser ] = useAuth();
  console.log(user) // LOGS USER
  return (
    <div className="App">
      <Navbar />
      <Title />
      <Routes>
        <Route
          path="/home"
          element= 
            <RequireAuth>
              <Home />
            </RequireAuth> 
           />
      </Routes>
      <Footer />
    </div>
  )


export default App;

requireAuth.js

import React from 'react';
import  useAuth  from './userContext';


const RequireAuth = ( children ) => 
    const [ user, setUser ] = useAuth();
    console.log(user) // LOGS UNDEFINED
    
    /* Some logic running if user is set or not */

    return children;


export default RequireAuth;

【问题讨论】：

你能不能创建一个minimal reproducible example 以便我们帮助调试问题，有一些在线工具可以帮助响应应用程序，例如codesandbox。

感谢您的评论。我创建了一个代码沙盒，那里一切正常。所以它帮助我了解问题出在其他地方。

【参考方案1】：

发现问题所在。我的问题是我没有正确使用路由器链接，并且每次重置上下文时。 显示的代码，在设置正确的链接后，工作正常。

【讨论】：

你应该考虑在你的答案中添加一些代码。