javascript - 上下文不更新异步函数中的 React

Question

我有一个带有 [username,setUsername] 钩子和 UserContext Provider 的 App.js 文件。我在 Login.js 中使用它，但由于某种原因，contextUser.setUserContext 不起作用，即使我认为我可以访问 contextUser.username 的值。我的其他上下文使用这个实现完美地工作，但不是这个。我究竟做错了什么 ？

这是源代码（我删除了不必要的代码）注意：Login.js 中的第二个用户名挂钩用于其他用途

应用程序.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 & 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>
  );
}

登录.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>
  );
}

标签： javascriptreactjs