React-query useMutation在Formik的onSubmit中无法执行的问题排查

先给你指出代码里的明显问题，再逐一排查可能导致addList.mutate(data)不执行的原因：

1. 验证逻辑的低级错误 #

你在validate函数里犯了一个笔误：当language为空时，错误信息被赋值给了errors.title而非errors.language。这会导致Formik的验证状态混乱，即使language未填写，错误提示会挂在title字段上，可能干扰表单的提交判断逻辑。先修正这个问题：

validate: (data) => {
  let errors = {};
  if (!data.title) {
    errors.title = "Required";
  }
  // 修正错误赋值的字段
  if (!data.language) {
    errors.language = "Required";
  }
  return errors;
},

2. 调整resetForm的执行时机 #

你在调用addList.mutate(data)后立刻执行formik.resetForm()，如果addList.mutate是异步操作，同步重置表单可能会破坏操作上下文，甚至导致异步任务被中断。建议把重置操作放到mutate的成功回调里：

onSubmit: (data) => {
  setFormData(data);
  addList.mutate(data, {
    onSuccess: () => {
      formik.resetForm();
      // closeHandler();
    },
    onError: (err) => {
      console.error('提交失败:', err); // 捕获错误便于排查
    }
  });
},

3. 确认addList的初始化状态 #

检查addList是否通过React Query的useMutation正确初始化，确保mutation函数本身没有逻辑错误。比如确认mutation函数的参数、接口地址等是否正确，通过onError回调打印错误信息，能快速定位是否是mutate自身的问题。

4. 验证表单是否真的触发了onSubmit #

在onSubmit函数开头添加日志，确认表单提交逻辑是否真的被触发：

onSubmit: (data) => {
  console.log('表单已提交，数据:', data); // 验证是否进入提交流程
  // ... 后续代码
}

如果没有打印日志，说明表单提交逻辑有问题——比如提交按钮的type不是submit，或者Formik的表单组件没有正确包裹输入项。

修正后的完整代码示例：

const formik = useFormik({
  initialValues: {
    title: "",
    language: null,
  },
  validate: (data) => {
    let errors = {};
    if (!data.title) {
      errors.title = "Required";
    }
    if (!data.language) {
      errors.language = "Required";
    }
    return errors;
  },
  onSubmit: (data) => {
    console.log('提交数据:', data);
    setFormData(data);
    addList.mutate(data, {
      onSuccess: () => {
        formik.resetForm();
        // closeHandler();
      },
      onError: (err) => {
        console.error('添加列表失败:', err);
      }
    });
  },
}); 

内容的提问来源于stack exchange，提问作者Daniel L