Fast Refresh失败（组件不兼容）及useSwitchHotel mutate未执行问题排查

• 依赖项配置遗漏
  如果用React Query这类库实现useSwitchHotel，要确保查询的依赖数组或启用条件包含仪表盘的状态变量。比如状态变更后，查询的enabled条件没关联状态，就不会触发执行：

  const { mutate } = useSwitchHotel(hotelId, {
    enabled: !!hotelId // 绑定状态变量，确保状态变化时启用查询
  });
  

  要是在useEffect里触发mutate，别忘把状态变量和mutate本身放进依赖数组。

• mutate未被主动调用
  状态变更后，你得明确调用mutate()方法才会触发数据变更。比如可以在状态更新的useEffect里执行：

  useEffect(() => {
    if (currentHotelId) {
      mutate(currentHotelId); // 状态变化时主动触发mutate
    }
  }, [currentHotelId, mutate]);
  

  检查代码里有没有状态变更后触发mutate的逻辑，别光改状态却不调用方法。

• 组件未感知状态变化
  你提到组件无法快速刷新，可能是状态没通过React的useState、useReducer或Redux这类工具管理。如果是手动维护的变量，React不会感知到变化，组件不重新渲染，自然不会触发后续的mutate逻辑。

• 缓存策略干扰
  若React Query设置了过长的staleTime或缓存保留策略，状态变更后可能读取缓存而非触发新的mutate。可以在mutate成功后主动失效相关缓存：

  mutate(newHotelId, {
    onSuccess: () => {
      queryClient.invalidateQueries(['hotelData']); // 强制刷新缓存
    }
  });
  

• 执行条件不满足
  检查代码里有没有针对mutate的条件判断，比如状态变更后hotelId是空值、格式错误，导致不满足执行条件。可以在状态变更处加console.log，打印当前状态值和mutate的触发条件，排查是否符合要求。

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