reactjs - 无法从提供者获取数据以在反应上下文中使用

Question

我试图将一些值从反应上下文提供者传递给消费者，但我无法这样做。

这是我的 app.js 文件

import React, { useState,useCallback } from "react";
import { Container, Nav } from "./styled-components";

import Detail from "./Detail";
import Home from "./Home";
import { NavLink,Route,BrowserRouter as Router,HashRouter,Redirect,Switch } from 'react-router-dom';
import Auth from '../user/pages/Auth';
import  Header  from "./Header";
import { AuthContext } from '../shared/context/auth-context';
import { useAuth } from '../shared/hooks/auth-hook';


const App = () => {
  const { token, login, logout, userId } = useAuth();
console.log(userId);

  let routes;
  if (token) {
    routes=(
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/detail/:metricType" component={Detail} />
        <Redirect to="/" />
      </Switch>
    )
  }
  else{
    routes=(
      <Switch>
          <Route path="/auth"><Auth /></Route>
          <Redirect to="/auth" />
      </Switch>
    )
  }

    return (

      <AuthContext.Provider
      value={{
        isLoggedIn: !!token,
        token: token,
        userId: userId,
        login: login,
        logout: logout
      }}
    >
      <Router>
        <Header/>
        <main>{routes}</main>
        </Router>
       </AuthContext.Provider>
        )
  }


export default App;

现在这是我的上下文 auth-context.js

import { createContext } from 'react';

export const AuthContext = createContext({
  isLoggedIn: false,
  userId: null,
  token: null,
  login: () => {},
  logout: () => {}
});

最后这是我在 header.js 中的消费者

import React, { useContext } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { Container, Nav } from "./styled-components";
import { AuthContext } from '../context/auth-context';
export default Header => {

  const auth = useContext(AuthContext);
  console.log(auth);
  return (

    <Nav className="navbar navbar-expand-lg fixed-top is-white is-dark-text">
      <Container className="navbar-brand h1 mb-0 text-large font-medium">
        <a href="/"> DevOps Dashboard</a>
      </Container>
      <ul className="nav-links">
        {!auth.isLoggedIn && (
          <li>
            <NavLink to="/auth">Login</NavLink>
          </li>
        )}
        {auth.isLoggedIn && (
          <li>
            <button onClick={auth.logout}>LOGOUT</button>
          </li>
        )}
      </ul>
    </Nav>
  )
}

我只得到 {isLoggedIn: false, userId: null, token: null, login: ƒ, logout: ƒ}上面的console.log。我在传递时拥有 app.js 中的所有值，但在使用标头时，看起来我总是从上下文文件中获取默认值。

标签： reactjs