React类组件登出时setState修改auth状态未立即生效问题咨询

问题原因 #

React 类组件的 setState 是异步批量更新的机制，调用 setState 后不会立刻修改 this.state 中的值，也不会立刻触发组件重渲染，会等到当前同步逻辑执行完成后再统一处理状态更新。你在调用 setState 后立刻执行路由跳转，此时 auth 状态还未完成更新，组件也没来得及重渲染同步 AuthContext 的值，就已经跳到了其他页面，自然会出现状态未变更的现象。

修复方案 #

利用 setState 的第二个参数（状态更新完成后的回调函数），把路由跳转逻辑放到回调中执行，确保 auth 状态更新、AuthContext 同步完成后再跳转，修改后完整代码如下：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'; // 原代码缺失该导入，需补充
import { AuthContext } from '../Context/AuthContext';
    
class Home extends Component {
  state = {
    auth: true
  }

  handleLogOut = () => {
    localStorage.clear();
    sessionStorage.clear();
    // 跳转逻辑放入setState回调，确保状态更新完成后再执行
    this.setState({auth: false}, () => {
      this.props.history.push('/'); 
    });
  }

  render() {
    return (
      <AuthContext.Provider value={this.state.auth}>
        <div>
          <button onClick={this.handleLogOut}>Log out</button>
        </div>
      </AuthContext.Provider>
    );
  }
};
    
export default withRouter(Home);

补充优化点：原代码导入的 useEffect、useState 是函数组件专用的Hooks，类组件中不需要使用，可以直接删除减少冗余代码。

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