回调函数无法获取useState更新后的状态值，求解决方法

问题场景 #

我们实现了一款接收selectedMenuItem字符串参数回调的可复用菜单栏，相关定义如下：

MenuItem接口 #

export default interface MenuItem {
  title: string;
  id: string;
  onClick: (option: string) => void;
}

初始菜单数据 #

[
    {
      title: "menu1",
      id: "MENU_1",
      onClick: (option) => {
        onMenuClick(option);
      }
    },
    {
      title: "menu2",
      id: "MENU_2",
      onClick: (option) => {
        onMenuClick(option);
      }
    }
]

典型回调逻辑 #

const onMenuClick = (option) => {
    switch (option) {
        case TopNavigationMenuItems.Security:
            navigate('../security');
            break;
        case TopNavigationMenuItems.Members:
            navigate('../members');
            break;
        case TopNavigationMenuItems.Budgets:
            navigate('../budgets');
            break;
        case TopNavigationMenuItems.Files:
            navigate('../files');
            break;
        default:
            break;
    }
};

当前遇到的问题：点击菜单按钮时，回调函数只能获取useState声明的初始状态值，无法拿到更新后的最新状态。

解决方案 #

1. 使用useRef保存最新状态引用 #

利用useRef的特性（其current属性不会随组件重渲染而重置，可手动更新），同步保存最新状态，在回调中直接读取ref.current获取最新值：

import { useState, useRef, useEffect } from 'react';

// 声明状态和对应的ref
const [currentState, setCurrentState] = useState('initial');
const stateRef = useRef(currentState);

// 状态更新时同步ref
useEffect(() => {
  stateRef.current = currentState;
}, [currentState]);

const onMenuClick = (option) => {
  // 读取最新状态
  console.log('最新状态:', stateRef.current);
  switch (option) {
    case TopNavigationMenuItems.Security:
      navigate('../security');
      break;
    // 其他case逻辑
  }
};

2. 让菜单数据依赖最新回调 #

将菜单数据用useMemo包裹，依赖项设置为onMenuClick。这样每次组件重渲染生成最新的onMenuClick后，菜单数据会重新生成，确保绑定的是最新回调：

import { useState, useMemo } from 'react';

const [currentState, setCurrentState] = useState('initial');

const onMenuClick = (option) => {
  console.log('最新状态:', currentState);
  switch (option) {
    case TopNavigationMenuItems.Security:
      navigate('../security');
      break;
    // 其他case逻辑
  }
};

// 用useMemo确保菜单数据随回调更新
const menuItems = useMemo(() => [
  {
    title: "menu1",
    id: "MENU_1",
    onClick: (option) => onMenuClick(option)
  },
  {
    title: "menu2",
    id: "MENU_2",
    onClick: (option) => onMenuClick(option)
  }
], [onMenuClick]);

3. 结合useCallback缓存回调 #

如果回调逻辑复杂，用useCallback缓存回调函数，仅当依赖项变化时重新创建，再配合useMemo的菜单数据，进一步优化性能：

import { useState, useCallback, useMemo } from 'react';

const [currentState, setCurrentState] = useState('initial');

// 用useCallback缓存回调，依赖状态和导航函数
const onMenuClick = useCallback((option) => {
  console.log('最新状态:', currentState);
  switch (option) {
    case TopNavigationMenuItems.Security:
      navigate('../security');
      break;
    // 其他case逻辑
  }
}, [currentState, navigate]);

const menuItems = useMemo(() => [
  {
    title: "menu1",
    id: "MENU_1",
    onClick: (option) => onMenuClick(option)
  },
  {
    title: "menu2",
    id: "MENU_2",
    onClick: (option) => onMenuClick(option)
  }
], [onMenuClick]);

更优实现方案推荐 #

1. 解耦菜单栏与业务逻辑 #

让菜单栏组件仅负责渲染和传递选中事件，把状态读取、页面跳转等业务逻辑完全交给父组件处理，避免闭包捕获旧状态的问题：

// 菜单栏组件（仅做UI和事件传递）
interface MenuProps {
  items: { title: string; id: string }[];
  onItemSelect: (itemId: string) => void;
}

const Menu = ({ items, onItemSelect }: MenuProps) => {
  return (
    <div>
      {items.map(item => (
        <button key={item.id} onClick={() => onItemSelect(item.id)}>
          {item.title}
        </button>
      ))}
    </div>
  );
};

// 父组件（处理业务逻辑）
const ParentComponent = () => {
  const [currentState, setCurrentState] = useState('initial');
  
  const handleMenuSelect = (itemId) => {
    console.log('最新状态:', currentState);
    switch (itemId) {
      case TopNavigationMenuItems.Security:
        navigate('../security');
        break;
      // 其他case逻辑
    }
  };

  const menuItems = [
    { title: "menu1", id: "MENU_1" },
    { title: "menu2", id: "MENU_2" }
  ];

  return <Menu items={menuItems} onItemSelect={handleMenuSelect} />;
};

2. 整合React Router导航逻辑 #

如果菜单仅用于页面跳转，可以直接在菜单项中定义路由地址，让菜单栏组件渲染Link组件，彻底简化回调逻辑：

// 菜单栏组件
import { Link } from 'react-router-dom';

interface MenuProps {
  items: { title: string; id: string; to: string }[];
}

const Menu = ({ items }: MenuProps) => {
  return (
    <div>
      {items.map(item => (
        <Link key={item.id} to={item.to}>
          {item.title}
        </Link>
      ))}
    </div>
  );
};

// 父组件使用
const ParentComponent = () => {
  const menuItems = [
    { title: "Security", id: TopNavigationMenuItems.Security, to: '../security' },
    { title: "Members", id: TopNavigationMenuItems.Members, to: '../members' }
  ];

  return <Menu items={menuItems} />;
};

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