React状态无法更新：Header组件点击未切换isLoggedIn状态

看了你的代码，问题出在Header组件里的<a>标签上！当你点击这些按钮时，浏览器会执行默认的跳转行为（因为href属性存在），导致整个页面刷新——这意味着你的App组件会被重新挂载，state自然就回到初始的false了，所以你看到状态切换没生效。

解决步骤： #

1. 阻止默认跳转行为
   在Header组件的点击事件中添加e.preventDefault()，阻止浏览器刷新页面。修改renderContent里的onClick回调：

修改退出登录按钮：

<a 
  onClick={(e) => {
    e.preventDefault(); // 阻止默认跳转，避免页面刷新
    this.props.onEventClick();
  }} 
  href="/api/logout" 
  style={{borderRadius: '12px'}} 
  className="waves-effect waves-light btn-small green darken-1"
>
  Log Out
</a>

登录按钮同理修改：

<a 
  href="/auth/spotify" 
  onClick={(e) => {
    e.preventDefault();
    this.props.onEventClick();
  }} 
  style={{borderRadius: '12px'}} 
  className="waves-effect waves-light btn green darken-1"
>
  Log in with Spotify
</a>

这样点击按钮时，只会触发状态切换逻辑，不会刷新页面，state就能正确更新了。

2. 额外优化：持久化状态（可选）
   如果你的登录状态需要在页面刷新后依然保留，可以用localStorage存储状态，避免刷新后丢失。修改App组件的相关逻辑：

constructor() {
  super();
  // 从localStorage读取初始状态，无值则默认false
  this.state = { isLoggedIn: localStorage.getItem('isLoggedIn') === 'true' }
}

onEventClick = () => {
  const newLoginState = !this.state.isLoggedIn;
  this.setState({isLoggedIn: newLoginState});
  // 同步状态到localStorage
  localStorage.setItem('isLoggedIn', newLoginState.toString());
}

这样即使页面意外刷新，登录状态也会从localStorage中恢复，不会回到初始值。

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