Блог

У меня есть App.js файл с привязкой [username,setUsername] и поставщиком UserContext. Я использую его в Login.js но по какой-то причине contextUser.setUserContext не работает, даже если я думал, что могу получить доступ к значению contextUser.username. Мой другой контекст отлично работает с использованием этой реализации, но не этой. Что я делаю не так?

Вот исходный код (я удалил ненужный код) ПРИМЕЧАНИЕ: второе имя пользователя подключается Login.js используется для чего-то другого

App.js

 import {useEffect, useState} from 'react'
/** @jsx jsx */
import { jsx } from '@emotion/core'
// Local
import { UserContext } from './Contexts/UserContext';
import { LoggedInContext } from './Contexts/LoggedInContext';


export default () => {
  //VARIABLES amp; HOOKS
  const styles = useStyles();
  const [username, setUsername] = useState("My Account")
  const [loggedIn, setLoggedIn] = useState(false);

  const contextLoggedIn = {
    loggedIn: loggedIn,
    setLoggedInContext: setLoggedIn
  }

  const contextUser = {
    username: username,
    setUserContext: setUsername
  }


  //RENDER
  return (
    <UserContext.Provider value={contextUser}>
    <LoggedInContext.Provider value={contextLoggedIn}>
      <Router>
        <div className={styles.root}>
          <Header/>

          <Switch>
            <Route path="/login">
              {loggedIn ? <Redirect to="/welcome"/> : <Login onUser={setUsername}/>}
            </Route>
            <Route path="/register">
              {loggedIn ? <Redirect to="/welcome"/> : <Register/>}
            </Route>
            <Route path="/welcome">
              {loggedIn ? <Main drawerMobileVisible={drawerMobileVisible} /> : <Redirect to="/login"/>}
            </Route>
            <Route path="/"> 
              <Redirect to="/login" />
            </Route>
          </Switch>

          <Footer />
        </div>
      </Router>
    </LoggedInContext.Provider>
    </UserContext.Provider>
  );
}
 

Login.js

 import React, { useContext, useState } from 'react';
/** @jsx jsx */
import { jsx } from '@emotion/core'
// Layout
import { UserContext } from './Contexts/UserContext';

export default ({
}) => {
  const contextUser = useContext(UserContext)
  const [username, setUsername] = useState(null)

  const handleLogIn = () => {
    axios.post('http://localhost:3001/users/login',{
        username: username,
        password: password
    }, {withCredentials: true}).then(function (response){
      setWrongUser(false);
      setWrongPass(false);
      console.log("Redirecting to welcome...")
      contextUser.setUserContext(username) //Not working for some reason
      console.log(contextUser.username)
      onUser(username)
      window.location.href = '/welcome';
    })
  }
 

UserContext.js

 import React from 'react';

export const UserContext = React.createContext({
    username: "My Account",
    setUserContext: (username) => {}
});
 

Редактировать:
Вот Header.js который не видит обновленное имя пользователя из контекста

 import './App.css';
/** @jsx jsx */
import { jsx } from '@emotion/core'
import React from 'react'
import {useContext} from 'react'
import { LoggedInContext } from './Contexts/LoggedInContext';
import { UserContext } from './Contexts/UserContext';
import {ReactComponent as ECEIcon} from './icons/LogoECE.svg';

export default ({
}) => {
  const contextUser = useContext(UserContext)
  const contextLoggedIn = useContext(LoggedInContext)

  return (
    <header className={styles.root}>
      <AppBar position="static" color="primary">
        <Toolbar>
          { contextLoggedIn.loggedIn ?
          <Button
            variant="contained"
            color="secondary"
            className={styles.accountButton}
            onClick={handleClick}
            endIcon={<AccountCircleRoundedIcon></AccountCircleRoundedIcon>}
          >
            { contextUser.username }
          </Button> : ""
          }
  
        </Toolbar>
      </AppBar>
    </header>
  );
}