如何使用react-query验证数据更新？表单规则失效求助

问题根因 #

你直接调用 form.getFieldsValues() 获取表单值并传给 mutate，但这个方法仅读取当前字段的原始值，不会触发你配置的表单验证规则。React Query 的 useMutation 只负责数据提交逻辑，本身不处理表单校验，所以验证规则完全没起作用。

修复步骤 #

1. 先触发表单校验，再提交数据 #

使用表单组件提供的校验方法（以 Ant Design Form 为例，对应 validateFields()），在校验通过后再调用 mutate：

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';
import { useForm } from 'antd/es/form';

const [form] = useForm();

const { mutate } = useMutation((validatedData) => 
  axios.post(url, validatedData, {
    // 注意：axios 没有 type 参数，若要提交表单格式，需设置正确的请求头
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  })
);

// 提交处理函数
const handleSubmit = async () => {
  try {
    // 触发表单校验，校验通过后返回合法的字段值
    const validValues = await form.validateFields();
    // 校验通过再调用 React Query 的 mutate 提交数据
    mutate(validValues);
  } catch (error) {
    // 处理校验失败的场景，比如提示用户错误信息
    console.error('表单校验失败:', error);
  }
};

2. 修正 axios 请求格式配置 #

你代码里的 {type:'form'} 不是 axios 的合法配置项，若需要提交表单格式数据，分两种情况处理：

• URL 编码格式（application/x-www-form-urlencoded）：需要用 qs 库序列化数据

  import qs from 'qs';
  
  const { mutate } = useMutation((validatedData) => 
    axios.post(url, qs.stringify(validatedData), {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
  );
  

• FormData 格式（multipart/form-data）：适用于文件上传场景

  const { mutate } = useMutation((validatedData) => {
    const formData = new FormData();
    Object.entries(validatedData).forEach(([key, value]) => {
      formData.append(key, value);
    });
    return axios.post(url, formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });
  });
  

关键提示 #

• 表单验证是表单组件的职责，React Query 只负责数据的异步提交与状态管理，二者职责分离，必须先完成表单校验再提交。
• 如果使用其他表单库（如 Formik），逻辑类似：先调用表单库的校验方法，确认合法后再传入 mutate。

内容的提问来源于stack exchange，提问作者이So