使用 mutateAsync 结果更新按钮单击时的令牌

Question

我正在尝试以最好的方式使用反应查询中的

useMutation()

，但我很挣扎。

我的问题是，当我单击按钮时，我想将

code

和

login

发布到我的后端服务器。成功的话，我应该得到一个

token

。我想使用 AuthContext 中的

setToken

并导航到个人资料页面

"/profile"

。

这是我尝试过的：

import { useState } from 'react';

import { Button } from './Button';
import {Navigate, useNavigate} from 'react-router-dom';
import {api} from '@/utils/api';
import {useMutation} from 'react-query';
import {useAuth} from '@/hooks/useAuth';

const loginWithTwoFaCode = async ({code, login} : {code: string, login: string | undefined}) => {
      console.log('[loginWithTwoFaCode]', code, login)
      const json = await api.post('auth/2fa/login', { json: { twoFACode: code, login: login } }).json();
      console.log(json)
      return json;
}

export const TwoFaLoginInput = (props: any) => {
  const [code, setCode] = useState('');
  const { login, setToken } = useAuth();

  const handleCodeChange = (event: any) => {
    setCode(event.target.value);
  };

  const handleSubmit = () => {
  };

  const navigate = useNavigate();

  const mutation = useMutation({mutationFn: loginWithTwoFaCode})

  return (
    <>
    <form onSubmit={handleSubmit} className="flex flex-col items-center">
      <input type="test" name="2FAcode" onChange={handleCodeChange} />
    </form>
      <Button size="small" type="primary" onClick={() => mutation.mutateAsync({code: code, login: login}).then(() => {console.log('mutation =', mutation)})}>
        Submit
      </Button>
    </>
  );
};

控制台给了我一个数据 =

undefined

:

mutation = 
Object { context: undefined, data: undefined, error: null, failureCount: 0, isPaused: false, status: "idle", variables: undefined, isLoading: false, isSuccess: false, isError: false, … }

如何使用 return

token

在我的身份验证上下文中使用

setToken

设置它？

我也可能以错误的方式做事，所以如果你有更好的解决方案来完成这个点击后的请求，我洗耳恭听。

谢谢

Answer 1

终于设法对发布请求的结果做一些事情，感谢文档：

  const mutation = useMutation({
    mutationFn: loginWithTwoFaCode,     
    onSuccess: data => {
      if (data.token) {
        setToken(data.token)
        console.log("Setting token to ", data.token)
      }
        navigate("/");
    },
  })

来源：https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses

现在我需要弄清楚如何修复数据上的类型错误（

'data' is of type 'unknown'.ts(18046)

）