React.js使用自定义useFetch钩子发送POST请求并接收响应的方法

你的调用存在入参格式错误，是触发报错的核心原因：标准useFetch钩子的入参结构为第一个参数传入url字符串，第二个参数传入请求配置对象，不需要将两个参数包裹在同一个对象内。
同时POST请求传输JSON格式请求体时，需要主动在请求头中声明Content-Type: application/json，否则服务端可能无法正常解析请求参数。

正确实现示例 #

// 第一步：提前定义和接口返回结构匹配的泛型类型
interface ExampleType {
  // 按照你的实际接口返回字段定义
  code: number;
  msg: string;
  result: {
    id: number;
    name: string;
  }
}

// 第二步：构造符合要求的POST请求配置
const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({}), // 替换为实际请求参数
};

// 第三步：传入泛型+正确参数调用useFetch
const { data, error, loading } = useFetch<ExampleType>('你的接口URL', requestOptions);

调用完成后，返回的data字段会自动映射为你定义的ExampleType类型，无需额外做类型转换。

封装简化调用（可选） #

如果需要频繁发送POST请求，可以自行封装高阶钩子简化重复配置：

function usePost<T = unknown>(url: string, body: Record<string, any> = {}, deps: any[] = []) {
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(body)
  }
  return useFetch<T>(url, options, deps)
}

// 调用示例
const { data, loading } = usePost<ExampleType>('/api/xxx', { userId: 123 })

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