How to use react-query useQuery inside onSubmit event?

在React应用中，useQuery通常用于数据的异步获取，并且它主要用于组件加载时自动触发数据获取。但你提到的场景是在表单的onSubmit事件中使用useQuery，这实际上不是useQuery的典型用例。对于基于事件的数据查询或操作，React Query提供了一个更适合的hook：useMutation。

为什么使用useMutation而不是useQuery?

1. 自动执行 vs 手动触发：

   • useQuery 在组件加载时自动执行，适合获取数据。
   • useMutation 用于在某个事件触发时执行，适合提交、更新数据等操作。

2. 状态管理：

   • useMutation 提供了更多的状态管理功能，如在请求过程中、成功后和失败时的状态管理。

如何在表单提交时使用useMutation：

假设我们有一个提交用户信息的表单，我们希望在表单提交时调用一个API。首先我们需要安装react-query：

bash
npm install react-query

然后，我们可以创建一个使用useMutation的组件：

jsx
import React from 'react';
import { useMutation } from 'react-query';

function UpdateProfile() {
    const mutation = useMutation(data => {
        return fetch('/api/update-profile', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-type': 'application/json; charset=UTF-8'
            }
        });
    });

    const handleSubmit = async (event) => {
        event.preventDefault();
        const formData = new FormData(event.target);
        const data = Object.fromEntries(formData.entries());
        
        mutation.mutate(data);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="username" required />
            <input type="email" name="email" required />
            <button type="submit">Update Profile</button>
            {mutation.isLoading && <p>Updating...</p>}
            {mutation.isError && <p>Error occurred: {mutation.error.message}</p>}
            {mutation.isSuccess && <p>Profile Updated Successfully!</p>}
        </form>
    );
}

export default UpdateProfile;

代码解释：

1. useMutation的使用：
   • useMutation 接受一个异步函数，这里是调用API来更新用户资料。
2. 表单处理：
   • handleSubmit 函数处理表单提交事件，阻止默认事件，然后从表单中获取数据并使用mutation.mutate进行数据提交。
3. 状态反馈：
   • 使用mutation.isLoading、mutation.isError和mutation.isSuccess来给用户提交状态的反馈。

这样我们就可以在用户提交表单时，有效地使用React Query的useMutation来处理数据的发送和状态管理。