React Context与Provider数据未按预期向下传递，useContext读取不到更新值

你在两个地方重复声明了AuthProvider，导致Context取值层级错乱：

• 入口文件已经将整个App组件包裹在AuthProvider作用域下
• App组件内部又嵌套了一层AuthProvider，组件内调用useContext时，取到的是外层入口处Provider的状态，而你登录时更新的是App内部那层Provider的状态，两者完全隔离，自然无法同步更新。

直接删除App组件内部的AuthProvider标签，同时移除无用的AuthProvider导入即可，修改后的App代码如下：

import React, {useContext} from "react";
import { useStyles} from "./style";
import {AuthContext} from "../../context/UserContext";
import RoutesProvider from "./Routes";
import Login from "../Login";

export default function App() {
  const classes = useStyles();
  const { user } = useContext(AuthContext)
  
  return (
    <>
        {typeof user.username !== "undefined" ? (
          <div className={classes.content}>
            <RoutesProvider />
          </div>
        ):(<Login />
        )}
    </>
  )
}

• handleAuthentication方法同时用了async/await声明和Promise.then链式调用，写法不统一，可以调整为纯await写法，更方便异常捕获
• 登录请求返回后可以先判断响应状态码再更新状态，避免接口报错时写入无效数据

内容的提问来源于stack exchange，提问作者Sylent