React登录后AppBar未自动渲染Menu，如何触发组件更新？

这问题我之前开发React应用时也碰到过！你分析的原因完全正确——你的AppBar直接写在ReactDOM.render的根渲染逻辑里，它是一个静态的JSX片段，不会自动感知登录状态的变化，所以只有手动刷新页面才会重新计算checkAuthenticationToken()的结果。

下面是几种可行的解决方案，推荐第一种，也是最符合React和Redux理念的做法：

1. 把AppBar封装成订阅Redux状态的组件 #

既然你已经在用Redux的Provider，那最佳实践就是让AppBar从store中获取登录状态，这样状态变化时组件会自动重渲染。

步骤1：创建自定义AppBar组件 #

如果用函数组件+Hook（推荐）：

import { useSelector } from 'react-redux';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Menu from './path-to-your-Menu-component'; // 替换成你的Menu组件路径

function CustomAppBar() {
  // 从Redux store中读取登录状态，这里假设你的store结构里有auth.isAuthenticated字段
  // 请根据你实际的store结构调整这个选择器
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  return (
    <AppBar 
      title="Shopping List App" 
      showMenuIconButton={true} 
      iconElementRight={isAuthenticated ? <Menu/> : null} 
      iconElementLeft={<IconButton><NavigationClose /></IconButton>} 
    />
  );
}

export default CustomAppBar;

如果用类组件：

import { connect } from 'react-redux';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import Menu from './path-to-your-Menu-component';

class CustomAppBar extends React.Component {
  render() {
    const { isAuthenticated } = this.props;
    return (
      <AppBar 
        title="Shopping List App" 
        showMenuIconButton={true} 
        iconElementRight={isAuthenticated ? <Menu/> : null} 
        iconElementLeft={<IconButton><NavigationClose /></IconButton>} 
      />
    );
  }
}

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(CustomAppBar);

步骤2：替换根渲染中的AppBar #

把原来直接写的AppBar换成我们封装的CustomAppBar：

import CustomAppBar from './path-to-your-CustomAppBar'; // 替换成你的组件路径

ReactDOM.render( 
  <Provider store={store}> 
    <BrowserRouter> 
      <MuiThemeProvider muiTheme={getMuiTheme(muiTheme)}> 
        <CustomAppBar /> {/* 这里替换成自定义组件 */}
        <div className="container"> 
          <Switch> 
            <Route exact path="/" render={requireLogin}/> 
            <Route path="/login" render={isLoggedIn}/> 
            <Route path="/register" component={RegisterForm}/> 
            <Route path="/shoppinglists" render={requireLogin}/> 
            <Route path="/:id/shoppinglist_items" render={itemsRequireLogin}/> 
            <Route component={NotFound}/> 
          </Switch> 
        </div> 
      </MuiThemeProvider> 
    </BrowserRouter> 
  </Provider> , 
  document.getElementById('root')
);

为什么这能生效？ #

封装后的CustomAppBar通过useSelector（函数组件）或connect（类组件）订阅了Redux store的变化。当登录成功后，你应该会dispatch一个action来更新store中的isAuthenticated状态，这时组件会自动感知到状态变化并重新渲染，iconElementRight就会根据最新的登录状态显示或隐藏Menu。

2. 不推荐：强制刷新整个页面 #

如果你只是临时想解决问题，也可以在登录成功后调用window.location.reload()来刷新整个页面，但这种方法不推荐——它会丢失当前应用的所有状态，破坏SPA的流畅体验，只适合临时调试。

注意事项 #

• 确保你的登录逻辑正确更新了Redux store中的登录状态，比如登录成功后dispatch类似{ type: 'LOGIN_SUCCESS' }的action，对应的reducer要把isAuthenticated设为true。
• 如果你的checkAuthenticationToken()是一个直接读取localStorage的函数，那也可以在自定义AppBar组件中调用它，但最好还是把登录状态存在Redux store里，这样整个应用的状态管理更统一。

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