React组件state未更新：点击<li>无法添加.selected类问题

核心问题原因 #

点击<li>元素时，你先调用selectOption触发setState，紧接着就执行this.props.toggleMenu()。由于setState是异步操作，而toggleMenu()大概率是用来隐藏/卸载当前导航组件的，这会导致React取消未完成的state更新——所以setState的回调函数不会执行，组件也来不及重新渲染应用.selected类。

解决方案 #

方案1：确保State更新完成后再隐藏菜单

把toggleMenu()放到setState的回调函数里，保证状态更新、组件重新渲染后再执行菜单隐藏操作：

修改<li>的onClick逻辑：

<li
  key={index}
  onClick={() => {
    this.setState({ activeItem: index }, () => {
      // 状态更新完成后再隐藏菜单
      this.props.toggleMenu();
    });
  }}
  className={index === activeItem ? styles.selected : ''}
>

或者保持selectOption方法，调整它的逻辑：

selectOption = (index) => {
  console.log(index);
  this.setState({
    activeItem: index
  }, () => {
    console.log(this.state.activeItem);
    // 回调里执行菜单隐藏
    this.props.toggleMenu();
  });
}

// 对应的onClick简化为：
onClick={() => this.selectOption(index)}

方案2：状态提升到父组件（持久化选中状态）

如果父组件是通过条件渲染（比如{isMenuOpen && <MobileNavigationComponent />}）控制菜单显示，那么菜单关闭时组件会被卸载，内部state会丢失。这种情况下，建议把activeItem的状态提升到父组件，通过props传递给子组件：

父组件修改：

// 父组件中维护状态
class ParentComponent extends Component {
  state = {
    isMenuOpen: false,
    activeNavItem: 0
  };

  toggleMenu = () => {
    this.setState(prev => ({ isMenuOpen: !prev.isMenuOpen }));
  };

  setActiveNavItem = (index) => {
    this.setState({ activeNavItem: index });
  };

  render() {
    return (
      // ...其他代码
      {this.state.isMenuOpen && (
        <MobileNavigationComponent
          toggleMenu={this.toggleMenu}
          activeItem={this.state.activeNavItem}
          setActiveItem={this.setActiveNavItem}
        />
      )}
    );
  }
}

子组件修改：

// 子组件不再维护内部state，改用props
class MobileNavigationComponent extends Component {
  selectOption = (index) => {
    console.log(index);
    this.props.setActiveItem(index);
    this.props.toggleMenu();
  }
  
  render() {
    const { activeItem } = this.props; // 从props获取选中状态

    return (
      <div className={styles.MobileMenuModal}>
        <h1 className={styles.title}>Menu</h1>
        <ul className={styles.mobileMenu}>
          {menuItems.map((item, index) => (
            <li
              key={index}
              onClick={() => this.selectOption(index)}
              className={index === activeItem ? styles.selected : ''}
            >
              <img src={item.icon} alt={item.label} />
              <Link to={item.path}>{item.label}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

这样即使菜单关闭（组件卸载），选中状态会保存在父组件中，下次打开菜单时能自动显示之前选中的项。

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