React组件状态更新后自动回退至旧值问题求助

核心问题 #

你遇到的状态回滚，根源在于两个组件的状态管理逻辑冲突：

1. HeaderBar 自身维护了 state 状态，并且通过无依赖项的 useEffect，每次组件渲染都会调用 props.throwData(state)，把自身的 state 同步给父组件 MenuBar 的 actual_class。
2. 当你点击 Close_menu 将 actual_class 改为 closed 后，MenuBar 会重新渲染，带动 HeaderBar 也重新渲染。此时 HeaderBar 内部的 state 还是之前的 open，所以 useEffect 会再次触发 throwData，把 actual_class 强行改回 open，导致状态短暂更新后立刻回滚。

另外，当前的写法也不符合状态提升的正确逻辑——状态应该统一放在父组件维护，子组件只负责触发修改和展示状态，不需要自己存一份重复的状态。

修复后的代码 #

修改后的 HeaderBar

import './styles/headerBar.css';

function HeaderBar(props) {
  // 直接使用父组件传递的状态和修改函数
  const { actualState, setActualState } = props;

  const OnClickHandler = () => {
    setActualState('open');
  };

  return (
    <div className="wrapper header_container">
      <ul>
        <li>
          <h1 className={actualState === 'open' ? 'green' : 'black'}>B</h1>
        </li>
        <li onClick={OnClickHandler}>
          <span className="material-icons md-18">menu</span>
        </li>
      </ul>
    </div>
  );
}

export default HeaderBar;

修改后的 MenuBar

import './styles/menuBar.css';
import HeaderBar from './HeaderBar';
import { useState, useEffect } from 'react';

function MenuBar() {
  // 初始化状态为'closed'，避免undefined导致样式逻辑异常
  const [actual_class, set_class] = useState('closed');

  // 用useEffect监听状态变化，才能拿到最新的状态值（setState是异步的）
  useEffect(() => {
    console.log('当前状态:', actual_class);
  }, [actual_class]);

  const Close_menu = () => {
    set_class('closed');
  };

  return (
    <div>
      <div className={actual_class === 'open' ? 'hide_it' : 'show_it'}>
        {/* 把状态和修改函数传递给子组件 */}
        <HeaderBar actualState={actual_class} setActualState={set_class} />
      </div>
      <div className="wrapper menu_container">
        <h1 onClick={Close_menu}>I'am header bar</h1>
      </div>
    </div>
  );
}

export default MenuBar;

关键修改点 #

1. 统一状态管理：把状态完全移到父组件 MenuBar，HeaderBar 不再维护自己的 state，彻底避免状态同步冲突。
2. 移除错误的 useEffect：删除 HeaderBar 中无依赖的 useEffect，防止每次渲染都强制覆盖父组件状态。
3. 修复异步状态打印：用 useEffect 监听 actual_class 变化来打印最新值，因为 setState 是异步操作，直接在 set_class 后 console.log 拿不到新值。
4. 初始化状态：给 actual_class 设置初始值 closed，让样式逻辑更可靠。

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