为什么子组件中未定义上下文？答案

【问题标题】：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。
感谢您的评论。我创建了一个代码沙盒，那里一切正常。所以它帮助我了解问题出在其他地方。

标签： javascript reactjs react-router use-context

【解决方案1】：

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

【讨论】：

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