问题

我对在 react-query 中使用 useMutate 有一个问题。

我对 post 请求的逻辑如下（目前正在使用模拟的逻辑）
```typescript
const loginWithEmailAndPassword = async (
  params: LoginRequest
): Promise<AuthResponse> => {
  const payload = JSON.stringify(params);
  const response = await axios.post(LOGIN_URL, payload);
  return response.data;
};

const mockLoginWithEmailAndPassword = async (
  params: LoginRequest
): Promise<AuthResponse> => {
  params;
  console.log(params);
  await delay(3);
  return {
    authToken: 'login_auth_token',
    refreshToken: 'login_auth_refresh_token',
    companyId: '1',
    role: 'company',
  };
};

const fn = selectBasedOnMock(
  mockLoginWithEmailAndPassword,
  loginWithEmailAndPassword
);

export const useLogin = () => {
  return useMutation({
    mutationFn: (params: LoginRequest) => fn(params),
  });
};

当我在 LoginForm 组件中执行此 mutation 以登录时，loginMutation.isSuccess 属性在请求完成后被设置为 'false'，只有在我再次按下按钮后，isSuccess 属性才会被设置为 'true'，并且其中的语句才会执行

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

    if (loginMutation.isSuccess) {
      setCompanyId(loginMutation.data.companyId);
      storage.setToken(loginMutation.data.authToken);
      setUserRole(loginMutation.data.role);
    }
  };

我在这里做错了什么？如何确保我获得 isSuccess 的最新值并执行所需的更新？

这是我初始化 mutation 的方式

const loginMutation = useLogin()

<details>
<summary>英文:</summary>

I have a question regarding the usage of useMutate in react-query.

I have the following logic for post requests (currently it&#39;s using the mocked one)

const loginWithEmailAndPassword = async (
params: LoginRequest
): Promise<AuthResponse> => {
const payload = JSON.stringify(params);
const response = await axios.post(LOGIN_URL, payload);
return response.data;
};

const mockLoginWithEmailAndPassword = async (
params: LoginRequest
): Promise<AuthResponse> => {
params;
console.log(params);
await delay(3);
return {
authToken: 'login_auth_token',
refreshToken: 'login_auth_refresh_token',
companyId: '1',
role: 'company',
};
};

const fn = selectBasedOnMock(
mockLoginWithEmailAndPassword,
loginWithEmailAndPassword
);

export const useLogin = () => {
return useMutation({
mutationFn: (params: LoginRequest) => fn(params),
});
};

When i perform this mutation in the LoginForm component while clicking on login, the loginMutation.isSuccess property is set to 'false' even after the request is completed, and only after i press the button again, the isSuccess property is set to 'true' and the statements inside of it get executed

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

if (loginMutation.isSuccess) {
  setCompanyId(loginMutation.data.companyId);
  storage.setToken(loginMutation.data.authToken);
  setUserRole(loginMutation.data.role);
}

};

What am i doing wrong here? How to ensure that i get the freshest value of isSuccess and perform the required updates?

This is how i initialize the mutation

const loginMutation = useLogin()

</details>


# 答案1
**得分**: 1

阅读完文档后，特别是这个资源：
https://tkdodo.eu/blog/mastering-mutations-in-react-query

我找到了解决方案：

const handleButtonClick = () => {
    const params = { email, password };
    loginMutation.mutate(params, {
      onSuccess: (data) => {
        setCompanyId(data.companyId);
        storage.setToken(data.authToken);
        setUserRole(data.role);
      },
    });
  };

const handleButtonClick = () => {
    const params = { email, password };
    loginMutation.mutate(params, {
      onSuccess: (data) => {
        setCompanyId(data.companyId);
        storage.setToken(data.authToken);
        setUserRole(data.role);
      },
    });
  };