React Context中setIsAuthenticated无法更新isAuthenticated值的原因

问题描述 #

我刚开始学习React，被一个简单的问题困扰许久：我创建了Context变量用于存储认证状态，但是setIsAuthenticated无法正常更新isAuthenticated的值。触发onSuccess或onFailure回调时，已经确认handleLogin函数被正常调用，但isAuthenticated的值始终没有发生变化。

相关代码 #

auth.js（Context定义文件） #

import { createContext, useState } from 'react';

const MyContext = createContext();

function AuthProvider({ children }){
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  async function handleLogin(value){
    setIsAuthenticated(value);
  }
  return (
    <MyContext.Provider value={{ isAuthenticated, handleLogin}}>
      { children }
    </MyContext.Provider>
  )
}

export { MyContext, AuthProvider };

Login.js（登录逻辑组件） #

const onSubmit = (event) => {
    event.preventDefault();

    const userData = {
        Username: email,
        Pool: UserPool
    };


    const cognitoUser = new CognitoUser( userData );
    const authenticationData = {
        Username: email,
        Password: password
    };
    var authenticationDetails = new AuthenticationDetails( authenticationData );

    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: result => {
            handleLogin(true);
        },
        onFailure: err => {
            handleLogin(false);
        }
    });
}

App.js（根组件，补充提供） #

import {React} from 'react';
import './App.css';
import MainRoutes from './routes';
import {AuthProvider} from './providers/auth'
 
const cookies = new Cookies();

export default function App() {
  return (
      <AuthProvider>
        <div class="container">
          <MainRoutes />
        </div>
      </AuthProvider>
    )
}

问题原因与修复方案 #

按排查优先级从高到低对应以下几种情况：

• 没有通过useContext正确获取Context方法
  首先检查Login组件顶部是否正确导入Context实例、调用hook拿到handleLogin：

  import { useContext } from 'react';
  // 注意导入路径要和auth.js的导出路径完全一致
  import { MyContext } from './providers/auth';
  
  // 组件内部调用hook拿值
  const { isAuthenticated, handleLogin } = useContext(MyContext);
  

  如果Login组件内部自己定义了同名handleLogin、或者导入了错误路径下重复创建的Context实例，就会出现函数执行但状态不更新的情况。
• 对setState的生效时机有错误预期
  React的状态更新是异步批处理的，如果你在调用handleLogin(true)之后，立刻在onSuccess回调的同步代码里打印isAuthenticated，拿到的永远是旧值，这是React的正常机制，不是更新失败。状态更新会触发组件重渲染，只有重渲染之后通过useContext拿到的isAuthenticated才是最新值。
  可以加个副作用监听验证更新是否正常：

  useEffect(() => {
    console.log('认证状态最新值：', isAuthenticated);
  }, [isAuthenticated])
  

• 使用状态的组件不在Provider作用域内
  检查读取isAuthenticated的组件，是不是被放在了<AuthProvider>的子树范围外，如果组件在Provider外层，永远拿不到更新后的状态值。你目前App.js的Provider写法是正确的，只要路由下的组件没有脱离Provider包裹就不会触发这个问题。
• 多余的async标记引发隐式包装
  你代码里的handleLogin加了async标记但内部没有任何await逻辑，虽然不会直接导致更新失败，但建议去掉这个多余标记，避免出现意外的Promise包装问题：

  function handleLogin(value){
    setIsAuthenticated(value);
  }
  

排查小技巧：可以在AuthProvider组件内部加一个上述的useEffect监听isAuthenticated变化，如果Provider内能拿到最新值、业务组件里拿不到，100%是Context导入错误、或者组件不在Provider作用域的问题。

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