如何用React Query配合Flask实现表单POST提交与数据获取

这个表单提交触发后端计算的场景完全适配React Query，你之前觉得useMutation没有明显简洁性提升，是因为没用到它内置的状态托管能力，实际上它能帮你省掉所有手动维护请求状态的样板代码，同时原生支持竞态处理、错误捕获等你没写但实际需要的边界逻辑。

这类用户主动触发的非查询类请求，直接用useMutation即可，不需要开启缓存，和你现有原生fetch的行为完全一致，代码如下：

import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';

const MyApp = () => {
  // 仅保留表单输入值的状态，请求相关状态全交给React Query托管
  const [inputOne, setInputOne] = useState(null);
  const [inputTwo, setInputTwo] = useState(null);

  const calculateMutation = useMutation({
    mutationFn: async (params) => {
      const res = await fetch(`/api`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(params),
      });
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    },
    // 关闭缓存，每次请求都是全新调用，不保留历史数据
    gcTime: 0,
    retry: false,
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    calculateMutation.mutate({
      input1: inputOne,
      input2: inputTwo
    });
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input type="number" value={inputOne} onChange={(e) => setInputOne(e.target.value)} />
        <input type="number" value={inputTwo} onChange={(e) => setInputTwo(e.target.value)} />
        <button type="submit" disabled={calculateMutation.isPending}>
          {calculateMutation.isPending ? '计算中...' : 'Fetch data'}
        </button>
      </form>

      {/* 错误状态展示 */}
      {calculateMutation.isError && <p className="error">请求出错，请检查输入后重试</p>}

      {/* 成功结果渲染 */}
      {calculateMutation.isSuccess && (
        <div>
          <p>{calculateMutation.data.returnData1}</p>
          <p>{calculateMutation.data.returnData2}</p>
          <p>{calculateMutation.data.returnData3}</p>
        </div>
      )}
    </>
  )
}

export default MyApp;

注：如果你使用的是v4及更早版本的React Query，把代码中的isPending替换为isLoading即可，其余逻辑完全兼容。

• 减少样板代码：不需要手动写useState维护加载状态、返回结果状态，所有请求相关的状态（加载中、请求成功、请求失败、返回数据、错误信息）都由React Query自动生成，代码量减少30%以上
• 自动处理边界逻辑：内置重复提交拦截、请求竞态处理（避免多次快速点击时旧请求结果覆盖新结果的bug）、错误捕获能力，不需要自己额外写判断逻辑
• 扩展成本极低：后续如果要加请求成功提示、失败重试、请求取消等能力，只需要修改mutation配置项即可，不需要新增一堆状态变量

你不需要持久化缓存提交数据的需求可以直接满足，代码中配置的gcTime: 0会让React Query在请求结束后立刻清除本次请求的缓存数据，不会保留历史提交的参数和结果，每次点击提交都会发起全新的请求，和你之前用原生fetch的行为完全一致，没有额外的缓存副作用。

如果偏好SWR，用它提供的useSWRMutationHook可以实现完全一样的效果，核心思路都是相同的：把请求相关的通用状态交给库维护，只聚焦业务逻辑本身。

内容的提问来源于stack exchange，提问作者Denver Dang