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

问：

我正在尝试以最好的方式使用react-query，但我挣扎。useMutation()

我的问题是，当我单击按钮时，我想将 a 和 a 发布到我的后端服务器。成功后，我应该得到一个.我想从我的 AuthContext 使用并导航到配置文件页面。codelogintokensetToken"/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, … }

我如何使用返回在我的身份验证上下文中设置它？tokensetToken

我也可能以错误的方式做事，所以如果你有更好的解决方案来点击这个帖子请求，我全神贯注。

谢谢