React useMutation能否实现需求？参数传递及写法正确性咨询

问题描述 #

原本使用Promise的then语法处理请求，现改用React的useMutation实现相同逻辑，已编写useMutation封装代码，但调用时无法给myRequest传入第二个参数，同时不确定当前写法是否存在错误。

现有封装代码 #

const myRequest = (req: ReqMyParam) => {
  return postFetchData<ResMyParam, ReqMyParam>(
    myRoutes.myApi,
    req,
  )
}
export const useMyApiMutation = (
  onSuccess: (res: ResSuccessMessage<ResMyParam>) => void,
  onError: (error: ResErrorMessage) => void,
) => {
  return useMutation({
    mutationFn: (req: ReqMyParam) => {
      return myRequest(req)
    },
    onSuccess: onSuccess,
    onError: onError,
  })
}

调用代码（存在疑问的部分） #

// 原本期望给myRequest传第二个参数的写法
myRequest(
        {
          orderId: DATA.trxUnqNo,
          totAmt: trxAmt,
        },
        {// 不知道怎么把这部分传入useMutation封装的myRequest
          rpsCd,
          rpsMsg,
          trxSno,
        },
      )

// 当前调用useMutation的代码
const { mutate: myRequest} = useMyApiMutation(
    ({ DATA }: ResSuccessMessage<ResMyParam>) => {
      const url = DATA.checkoutPage
      otherMutation({
        rpsCd: rpsCd,
        rpsMsg: rpsMsg,
        trxSno: trxSno,
        trxUnqNo: '',
        trxUnqKey: DATA.payToken,
      })
    },
    ({ MESSAGE }: ResErrorMessage) => {
      alert(MESSAGE)
    },
  )

错误分析 #

1. 函数参数不匹配：当前myRequest仅定义了一个参数，但你调用时想传第二个，导致参数传递失败；同时封装的useMyApiMutation中，mutationFn只接收单个参数，无法直接传递多个参数给myRequest。
2. 变量重名冲突：调用useMyApiMutation时，将mutate重命名为myRequest，覆盖了原本的myRequest函数，会导致后续调用混乱。

解决方案 #

步骤1：修改myRequest函数，支持第二个参数 #

先定义第二个参数的类型，再更新函数接收参数并传递给postFetchData：

// 定义第二个参数的类型
type MyRequestExtraOptions = {
  rpsCd: string;
  rpsMsg: string;
  trxSno: string;
};

const myRequest = (req: ReqMyParam, options?: MyRequestExtraOptions) => {
  // 假设postFetchData支持第三个参数传入额外配置，根据实际情况调整
  return postFetchData<ResMyParam, ReqMyParam>(
    myRoutes.myApi,
    req,
    options
  )
}

步骤2：更新useMyApiMutation封装，支持传递多参数 #

由于useMutation的mutationFn仅能接收单个参数，我们可以把需要传递的参数打包成一个对象：

export const useMyApiMutation = (
  onSuccess: (res: ResSuccessMessage<ResMyParam>) => void,
  onError: (error: ResErrorMessage) => void,
) => {
  return useMutation({
    mutationFn: ({ req, options }: { req: ReqMyParam; options?: MyRequestExtraOptions }) => {
      return myRequest(req, options)
    },
    onSuccess,
    onError,
  })
}

步骤3：修改调用代码，解决重名并正确传参 #

将mutate重命名为不冲突的名称，调用时传入打包后的参数对象：

// 避免重名，将mutate重命名为mutateMyApi
const { mutate: mutateMyApi } = useMyApiMutation(
  ({ DATA }: ResSuccessMessage<ResMyParam>) => {
    const url = DATA.checkoutPage
    otherMutation({
      rpsCd: rpsCd,
      rpsMsg: rpsMsg,
      trxSno: trxSno,
      trxUnqNo: '',
      trxUnqKey: DATA.payToken,
    })
  },
  ({ MESSAGE }: ResErrorMessage) => {
    alert(MESSAGE)
  },
)

// 调用时传入包含请求参数和额外选项的对象
mutateMyApi({
  req: {
    orderId: DATA.trxUnqNo,
    totAmt: trxAmt,
  },
  options: {
    rpsCd,
    rpsMsg,
    trxSno,
  },
})

总结 #

经过上述修改后，既解决了myRequest传递第二个参数的问题，也修复了变量重名的错误，能够实现你预期的请求逻辑。

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