React-useForm ：第一个请求 react-query 没有发送 formData

Question

如标题所述，我尝试将 react-query 和 react-useform 结合起来。但不知何故，当我试图通过 api 请求发送它们时，由 use-form 处理的表单数据是空的。我知道我的代码应该有问题，因为数据在下一次提交时完美发送。这是我的代码：

const [formData, setFormData] = useState();
const {
  register,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm({
  criteriaMode: 'all',
});
...

const { isFetching, isSuccess, isError, refetch } = useQuery(
    'login',
    () => userApi.login(formData),
    {
        onError: (res) => {
            if (res.response.data) {
                setErrorData(res.response.data.errors);
            }
        },
        onSuccess: (res) => {
            const userReqData = res.data.payload.user;
            setUser(userReqData);
            setErrorData({ errors: {} });
            localStorage.setItem(
                'access_token',
                `Bearer ${res.data.payload.access_token}`
            );
            setTimeout(() => {
                if (userReqData.level === 'admin' || userReqData === 'head_admin') {
                    navigate('/admin');
                } else {
                    navigate('/me');
                }
            }, 2000);
        },
        enabled: false,
        retry: false,
    }
);

...

function handleLogin(data, e) {
  // MAYBE THIS IS THE PROBLEM, formData sould be properly set first , but somehow it doesn't. The 'setFormData' works properly, but the 'formData' state is not updated on the first request(still empty, but not empty on console.log) . Instead, 'formData' is sent on the second request, which is strange.

  setFormData(data);
  refetch();

  // or is there any other way to make refetch send the actual data from the handleLogin parameter right to the useQuery hook?
}

...

return (
  <form
    onSubmit={handleSubmit(handleLogin)}
  >
  ...
  </form>
)

'userApi' 是一个 axios 请求，已经用自定义 baseurl 和 headers 进行了修改，所以，基本上它只是一个普通的 axios 请求。

我使用的库：

react-query : https://react-query.tanstack.com/
https://react-hook-form.com/api/useform

Answer 1

您应该使用 useQuery 来获取数据，而不是执行操作。

来自文档：

A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise based method (including GET and POST methods) to fetch data from a server. If your method modifies data on the server, we recommend using Mutations instead.

Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects

Here 是一个很好的资源，可以帮助您将代码重构为突变。

React-useForm ：第一个请求 react-query 没有发送 formData

React-useForm : No formData are sent on the first request with react-query

reactjs

axios

react-hook-form

react-query