React Query实现顺序多POST请求并汇总响应后提交

问题分析 #

你的代码存在三个核心问题：

• 并行触发所有请求，未按要求顺序执行
• 状态更新异步导致成功响应未被正确收集
• 汇总请求在批量请求未完成时就已触发

修复方案 #

1. 改用单个useMutation处理批量顺序请求 #

通过在mutation函数内部循环执行请求，确保顺序执行，同时同步收集成功响应：

import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import "./styles.css";

export default function App() {
  // 批量请求并收集成功响应的mutation
  const batchMutation = useMutation({
    mutationFn: async (requests) => {
      const successfulResponses = [];
      for (const req of requests) {
        try {
          const res = await axios.post(req.url, req.data);
          successfulResponses.push(res.data);
        } catch (err) {
          // 忽略失败请求，继续执行下一个
          console.error(`请求 ${req.url} 失败:`, err);
        }
      }
      return successfulResponses;
    },
  });

  // 发送汇总请求的mutation
  const summaryMutation = useMutation({
    mutationFn: (summaryData) => {
      return axios.post("https://jsonplaceholder.typicode.com/posts", summaryData);
    },
    onSuccess: () => {
      alert("汇总请求发送成功");
    },
  });

  const handleClick = async () => {
    const requests = [
      { url: "https://jsonplaceholder.typicode.com/posts", data: { title: "foo1", body: "bar1", userId: 1 } },
      { url: "https://jsonplaceholder.typicode.com/posts", data: { title: "foo2", body: "bar2", userId: 1 } },
      // 可添加失败请求测试：{ url: "https://jsonplaceholder.typicode.com/invalid", data: {} }
    ];

    // 执行批量请求并等待完成
    const successful = await batchMutation.mutateAsync(requests);
    // 批量请求完成后发送汇总请求
    if (successful.length > 0) {
      await summaryMutation.mutateAsync(successful);
    } else {
      alert("没有成功响应可汇总");
    }
  };

  return (
    <div className="App">
      <button onClick={handleClick} disabled={batchMutation.isLoading || summaryMutation.isLoading}>
        {batchMutation.isLoading || summaryMutation.isLoading ? "处理中..." : "发送请求"}
      </button>
    </div>
  );
}

2. 关键修复点说明 #

• 顺序执行：使用for...of循环替代并行触发，确保每个请求完成后再执行下一个
• 响应收集：在mutation函数内部同步收集成功响应，规避React状态异步更新的问题
• 时机控制：通过mutateAsync等待批量请求完成后，再触发汇总请求
• 重复触发拦截：按钮添加禁用状态，防止请求处理中重复点击

原代码汇总数组为空的原因 #

• 每个useMutation的onSuccess是异步触发的，当调用汇总请求时，大部分批量请求还未完成，此时汇总数组仍是初始空值
• 直接修改数组（successResponses.push(res.data)）不会触发React状态更新，即使后续有响应，也无法被汇总请求捕获

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