React函数组件：handleDisconnectRoute无法捕获selectedRouteId更新值

你的推测完全正确——这是典型的React闭包陷阱：handleDisconnectRoute在组件初始渲染时创建，捕获了当时的selectedRouteId初始值（0），之后即便状态更新，这个函数也不会重新生成，因此始终访问的是旧状态。而useEffect因依赖数组触发重新执行，能拿到最新值。

下面提供几种针对性的解决办法：

方法1：用useCallback包裹函数并添加依赖 #

将handleDisconnectRoute用useCallback包裹，把selectedRouteId加入依赖数组，确保每次状态更新时函数重新生成，捕获最新值。同时更新renderButtons的依赖（因为它依赖handleDisconnectRoute）：

const handleDisconnectRoute = useCallback((item: TableItem) => {
  const deliveryId = item.id;

  console.log(selectedRouteId);
  console.log(deliveryId);

  const dataPayload = {
    deliveryId: deliveryId,
    selectedRouteId,
  };

  dispatch(deliveryActions.disconnectRoute(dataPayload));
}, [selectedRouteId, dispatch]);

const renderButtons = useCallback(
  (item: TableItem) => (
    <SettingList
      content1="DETAILS"
      content2="DISCONNECT"
      onClickContent1={() => handleOpenDetailsOrder(item.id)}
      onClickContent2={() => handleDisconnectRoute(item)}
    />
  ),
  [handleOpenDetailsOrder, handleDisconnectRoute]
);

方法2：直接从Redux获取最新值（最优解） #

既然selectedRouteId是从Redux的route.id同步而来，完全可以省去本地useState，直接在函数中获取最新的全局状态，彻底规避闭包问题：

1. 删除本地状态和同步逻辑：

// 移除这两行
// const [selectedRouteId, setSelectedRouteId] = useState<number>(0);
// useEffect(() => { if (route?.id) setSelectedRouteId(route.id); }, [orders]);

2. 修改handleDisconnectRoute：

const handleDisconnectRoute = (item: TableItem) => {
  const deliveryId = item.id;
  const selectedRouteId = route?.id ?? 0; // 直接从Redux取最新值

  console.log(selectedRouteId);
  console.log(deliveryId);

  const dataPayload = {
    deliveryId: deliveryId,
    selectedRouteId,
  };

  dispatch(deliveryActions.disconnectRoute(dataPayload));
};

这种方法减少了冗余的状态同步逻辑，是最简洁的方案。

方法3：用useRef保存最新状态 #

如果必须维护本地状态，可以用useRef绕过闭包陷阱，每次状态更新时同步ref的值：

const [selectedRouteId, setSelectedRouteId] = useState<number>(0);
const selectedRouteIdRef = useRef<number>(0);

// 同步最新状态到ref
useEffect(() => {
  selectedRouteIdRef.current = selectedRouteId;
}, [selectedRouteId]);

const handleDisconnectRoute = (item: TableItem) => {
  const deliveryId = item.id;
  const latestRouteId = selectedRouteIdRef.current; // 访问最新值

  console.log(latestRouteId);
  console.log(deliveryId);

  const dataPayload = {
    deliveryId: deliveryId,
    selectedRouteId: latestRouteId,
  };

  dispatch(deliveryActions.disconnectRoute(dataPayload));
};

额外优化：修正useEffect依赖 #

原代码中同步selectedRouteId的useEffect依赖数组错误，应该依赖route而非orders——只有当route变化时才需要更新本地状态：

useEffect(() => {
  if (route?.id) {
    setSelectedRouteId(route.id);
  }
}, [route]); // 依赖改为route

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