TanStack React Query：onSettled获取PUT请求体相关疑问

问题背景 #

需要在PUT请求完成后访问该请求的请求体，针对以下两个疑问进行解答：

1. 在onMutate中返回PUT参数，随后在onSettled中基于这些参数执行逻辑处理是否可行？ #

完全可行。React Query的onMutate回调返回的值会被作为第三个参数传递给onSettled（若未返回值则为undefined）。你示例中返回请求参数并在onSettled中接收、使用的写法完全符合React Query的设计逻辑，这种方式允许你在请求完成后，基于原始请求参数执行针对性逻辑（比如示例里的选择性设置加载状态），是合理且推荐的用法。

2. 为什么PUT参数是onSettled函数的第三个参数？ #

这是React Query的API设计规范，onSettled的参数遵循固定顺序：

• 第一个参数：请求成功时的响应数据，请求失败时为undefined
• 第二个参数：请求失败时的错误对象，请求成功时为undefined
• 第三个参数：触发mutation时传入的原始变量（即你的PUT参数）

这样的顺序设计是为了保持回调参数的一致性——无论mutation成功还是失败，你都能在onSettled中获取到原始请求变量，同时清晰区分成功/失败的结果。onSettled作为请求完成的统一回调，既可以处理成功场景也能处理失败场景，保留对原始请求参数的访问能力能覆盖更多业务逻辑需求。

示例代码 #

import React from "react";
import { useMutation } from "react-query";

const someProps = { prop1: "key1" };

export default function App() {
  const [isLoading, setIsLoading] = React.useState(false);

  const { mutate } = useMutation({
    mutationFn: async (someProps) =>
      await fetch("https://httpbin.org/put", {
        method: "PUT",
        body: JSON.stringify(someProps)
      }).then((response) => response.json()),
    onSuccess: (responseData) => {
      console.log("RESPONSE ON SUCCESS: " + JSON.stringify(responseData));
    },
    onMutate: (data) => {
      setIsLoading(true);
      console.log(
        "Yes, I have access to props before I send the request: " +
          JSON.stringify(data)
      );
      // 返回数据以便在onSettled中使用
      return data;
    },
    onSettled: (arg1NotUsed, arg2NotUsed, data) => {
      console.log(
        "Yes, I have access to props after I receive the response: " +
          JSON.stringify(data)
      );
      if (data) {
        setIsLoading(false);
      }
    }
  });

  return (
    <div>
      <p>is loading: {isLoading ? "LOADING" : "IDLE"}</p>
      <button onClick={() => mutate(someProps)}>trigger mutation</button>
    </div>
  );
}

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