使用React-Query Mutation时触发Axios 415错误求助

我有一个用于编辑数据的详情页，最初使用Yup验证配合普通函数调用API可正常运行。相关代码如下：

CustomerEditPage.js #

import React from 'react'
import { useMutation, useQueryClient, useQuery } from 'react-query'
import { useForm } from "react-hook-form"
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from "yup"
import * as api from '../../../service/CustomerDescApi'

const schema = yup.object({
    customerCode: yup.string().required('Customer Code is a required field'),
    taxid: yup.string().required('Tax Id is a required field'),
    nameLocal: yup.string(),
    nameEng: yup.string(),
    address1: yup.string(),
    address2: yup.string(),
    refCompany: yup.string(),
    comCus: yup.string(),
}).required()

const updateCustomer = async (cvid,newdata) => {
    const response = api.UpdateCvdesc(cvid,newdata);
    return response
}

const CustomerEditPage = () => {
const CVID = location.state.ID

const { register, handleSubmit, formState:{ errors }, setValue } = useForm({
        resolver: yupResolver(schema)
    })

setValue('customerCode', customer.customerCode)
setValue('taxid', customer.taxid)
setValue('nameLocal', customer.nameLocal)
setValue('nameEng',customer.nameEng)
setValue('address1',customer.address1)
setValue('address2',customer.address2)
setValue('refCompany',customer.refCompany)
setValue('comCus',customer.comCus)
setValue('status',customer.status)

const onSubmit = (data) => {
    updateCustomer(CVID,data)
}

CustomerDescApi.js #

import axios from "axios"

export const MRCAPI = axios.create({
      baseURL: "https://localhost:7257",
      headers: { "Access-Control-Allow-Origin": "*" ,
                  'Content-Type': 'application/json; charset=utf-8' }
})

export const UpdateCvdesc = async (cvid,newdata) => {
   console.log(newdata)
   const response = await MRCAPI.put(`/TestCustomerDesc/${cvid}`, newdata)
   return response.data
}

现在我想在项目中使用React-Query，于是添加了Mutation代码：

CustomerEditPage.js（React-Query版本） #

const { mutate } = useMutation(updateCustomer, {
        onSuccess: data => {
          console.log(data);
          const message = "Update Success"
          alert(message)
        },
        onError: () => {
          alert("there was an error")
        },
        onSettled: () => {
          queryClient.invalidateQueries('update');
        }
    })

并修改了提交函数：

const onSubmit = (data) => {
      mutate(CVID,data)
      //updateCustomer(CVID,data)
}

添加React-Query后，我始终收到Axios返回的415（Bad Request）错误，但移除React-Query代码后又能正常运行，请问这是什么原因？

问题根源 #

React Query的mutate函数仅接受单个参数作为传递给mutation函数的数据，你传入的第二个参数data会被React Query识别为mutate的配置选项，而非updateCustomer的第二个参数。

这导致updateCustomer实际只接收到第一个参数CVID，第二个参数newdata为undefined，API接口收到的请求体为空，不符合接口要求的JSON格式，因此返回415（不支持的媒体类型）错误。

另外，你的updateCustomer函数还遗漏了await关键字，会直接返回Promise而非API响应数据，虽不是415的直接原因，但也需要修正。

修复方案 #

有两种方式可以解决这个问题：

方案1：将参数包装为对象传递

修改updateCustomer函数，接收一个包含所有参数的对象：

const updateCustomer = async ({ cvid, newdata }) => {
    // 补上await，确保拿到API响应
    const response = await api.UpdateCvdesc(cvid, newdata);
    return response
}

修改提交函数，传递对象参数给mutate：

const onSubmit = (data) => {
    mutate({ cvid: CVID, newdata: data })
}

方案2：用数组传递多个参数

修改updateCustomer函数，解构数组参数：

const updateCustomer = async ([cvid, newdata]) => {
    const response = await api.UpdateCvdesc(cvid, newdata);
    return response
}

修改提交函数，传递数组参数给mutate：

const onSubmit = (data) => {
    mutate([CVID, data])
}

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