ReactJS中更新状态与路由切换时的竞态条件处理

你的问题核心是Redux状态更新的异步性导致路由跳转先于Dock关闭完成，以下是几种实用的解决方式：

方案一：等待状态更新完成后再跳转（依赖异步Action） #

如果你的closeAllDocks是返回Promise的异步Action（比如用Redux Toolkit的createAsyncThunk定义，或者自定义Thunk函数），可以通过await等待状态更新完成后再执行路由跳转：

const handleChatClick = async () => {
  await dispatch(closeAllDocks());
  history.push(`/chats/${chat.id}`);
};

注意：如果closeAllDocks是同步Action，dispatch会直接返回Action对象而非Promise，此时await不会生效，需要用方案二。

方案二：监听状态变化触发跳转 #

当closeAllDocks是同步Action时，通过useSelector监听Dock的状态，在所有Dock确认关闭后再执行路由跳转：

import { useSelector, useDispatch } from 'react-redux';
import { useHistory, useCallback } from 'react-router-dom';

// 组件内代码
const dispatch = useDispatch();
const history = useHistory();
const areAllDocksClosed = useSelector(state => 
  // 根据你的Dock状态结构调整，这里假设state.docks是所有Dock的数组，每个有isOpen字段
  state.docks.every(dock => !dock.isOpen)
);

const navigateToChat = useCallback(() => {
  history.push(`/chats/${chat.id}`);
}, [history, chat.id]);

const handleChatClick = () => {
  dispatch(closeAllDocks());
};

// 监听Dock状态，全部关闭后跳转
useEffect(() => {
  if (areAllDocksClosed) {
    navigateToChat();
  }
}, [areAllDocksClosed, navigateToChat]);

这种方式完全依赖Redux状态的变化来触发跳转，确保Dock关闭的状态已经同步到组件后再切换页面，从根源避免竞态。

方案三：临时禁用跳转触发（简单兜底） #

如果不想修改太多逻辑，可以在点击后先禁用按钮（防止重复点击），同时等待一个极短的延迟（不推荐，仅应急）：

const [isNavigating, setIsNavigating] = useState(false);

const handleChatClick = () => {
  if (isNavigating) return;
  setIsNavigating(true);
  dispatch(closeAllDocks());
  // 等待状态更新的短延迟，时间根据你的状态更新速度调整
  setTimeout(() => {
    history.push(`/chats/${chat.id}`);
    setIsNavigating(false);
  }, 100);
};

注意：这种方式不够可靠，延迟时间难以精准控制，仅作为临时方案使用。

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