自定义Hook报错：表达式不可调用，调用mutate函数遇问题

我尝试创建一个自定义Hook来发起POST请求，但调用mutate函数时遇到了问题。

自定义Hook代码 #

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

export const usePostRequest = () => {
  const mutation = useMutation({
    mutationFn: async (payload) => {
      const response = await axios.post('/api/target-endpoint', payload);
      return response.data;
    },
    onSuccess: () => console.log('请求完成'),
    onError: (err) => console.error('请求出错:', err)
  });

  return mutation;
};

调用Hook的代码 #

import { usePostRequest } from './hooks/usePostRequest';

const SubmitComponent = () => {
  const { mutate } = usePostRequest();

  const handleSubmit = () => {
    mutate({ username: 'test', content: 'demo' }); // 此处调用出现问题
  };

  return (
    <button onClick={handleSubmit}>提交请求</button>
  );
};

export default SubmitComponent;

常见问题排查与解决 #

1. 确认mutate的解构是否正确
   检查自定义Hook的返回值，必须确保从Hook返回的对象中正确解构出mutate。如果返回的是嵌套对象，要对应解构层级：

   // 若Hook返回{ post: { mutate } }，则需要这样解构
   const { post: { mutate } } = usePostRequest();
   

2. 避免在组件渲染阶段直接调用mutate
   mutate是触发异步请求的函数，直接在组件渲染时调用会导致无限循环，必须放在事件回调、带依赖的useEffect等时机执行：

   // 错误示例：渲染时直接执行
   mutate({ key: 'value' });
   // 正确示例：绑定到点击事件
   <button onClick={() => mutate({ key: 'value' })}>提交</button>
   

3. 检查mutationFn的参数传递
   确保自定义Hook中的mutationFn正确接收调用mutate时传入的参数，匹配后端接口的参数格式：

   // 确保mutationFn接收payload并传入请求
   mutationFn: async (payload) => {
     return axios.post('/api/endpoint', { data: payload }); // 适配后端参数结构
   }
   

4. 利用状态排查错误
   解构出Hook返回的isError、error、isLoading状态，直观定位请求状态：

   const { mutate, isLoading, isError, error } = usePostRequest();
   
   return (
     <div>
       <button onClick={handleSubmit} disabled={isLoading}>
         {isLoading ? '提交中...' : '提交'}
       </button>
       {isError && <p className="error">请求失败：{error.message}</p>}
     </div>
   );
   

5. 确认依赖配置（若使用react-query）
   如果Hook依赖外部变量，要在useMutation的mutationKey中添加对应依赖，确保mutation实例能正确更新：

   const usePostRequest = (userId) => {
     const mutation = useMutation({
       mutationKey: ['post-request', userId], // 添加依赖到mutationKey
       mutationFn: async (payload) => {
         return axios.post(`/api/user/${userId}/data`, payload);
       }
     });
     return mutation;
   };
   

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