react-query中useMutation的isSuccess未实时更新问题求助

问题原因 #

你调用mutateAsync后立刻判断isSuccess的方式存在问题：虽然mutateAsync的Promise会在请求完成后resolve，但此时组件还没完成重新渲染，loginMutation对象里的isSuccess和data还是之前的旧值（初始为false）。只有当React Query更新内部状态、触发组件重新渲染后，才能拿到最新的状态值。

三种可行的解决方案 #

1. 利用useMutation的onSuccess回调（推荐）

直接在mutation配置里指定成功后的逻辑，这是React Query设计的标准用法：

修改useLogin钩子：

export const useLogin = () => {
  return useMutation({
    mutationFn: (params: LoginRequest) => fn(params),
    onSuccess: (data) => {
      setCompanyId(data.companyId);
      storage.setToken(data.authToken);
      setUserRole(data.role);
    },
  });
};

然后组件里的点击事件简化为：

const handleButtonClick = () => {
  const params = { email, password };
  loginMutation.mutate(params);
};

2. 用useEffect监听状态变化

如果需要在组件内部处理成功逻辑，可以通过useEffect监听isSuccess和data的变化：

import { useEffect } from 'react';

// ...组件内代码

useEffect(() => {
  if (loginMutation.isSuccess && loginMutation.data) {
    setCompanyId(loginMutation.data.companyId);
    storage.setToken(loginMutation.data.authToken);
    setUserRole(loginMutation.data.role);
  }
}, [loginMutation.isSuccess, loginMutation.data]);

const handleButtonClick = async () => {
  const params = { email, password };
  await loginMutation.mutateAsync(params);
};

3. 直接使用mutateAsync的返回值

mutateAsync会在请求成功后返回响应数据，你可以直接用这个返回值处理逻辑，不需要依赖mutation的状态：

const handleButtonClick = async () => {
  const params = { email, password };
  try {
    const data = await loginMutation.mutateAsync(params);
    setCompanyId(data.companyId);
    storage.setToken(data.authToken);
    setUserRole(data.role);
  } catch (error) {
    // 这里处理登录失败的情况，比如提示错误
    console.error('登录失败', error);
  }
};

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