使用Tanstack Query useMutation时遇mutate属性不存在错误求解决

错误原因 #

你把自己定义的普通函数NewUsers当成了Tanstack Query的mutation实例来调用mutate方法，但NewUsers只是一个返回Promise的普通函数，根本没有mutate属性。mutate是useMutation Hook返回对象里的方法，你搞混了调用对象。

修复步骤 #

1. 正确定义mutation函数
   把原来的NewUsers改成接收参数的形式，或者直接把逻辑写进mutationFn里，让mutation可以接收外部传入的数据：

   // 方式1：直接在mutationFn中定义逻辑
   const addUserMutation = useMutation({
     mutationFn: (userData: UserData) => UserService.post(userData),
     retry: false,
   });
   
   // 方式2：单独定义带参数的函数
   const createUser = (userData: UserData): Promise<UsersData> => UserService.post(userData);
   const addUserMutation = useMutation({
     mutationFn: createUser,
     retry: false,
   });
   

2. 调用正确的mutate方法
   在onSubmit里，调用useMutation返回的addUserMutation对象的mutate方法，传入你的inputData：

   const onSubmit = async (event: { preventDefault: () => void }) => {
     event.preventDefault();
     handleClose();
     // 传入组件的inputData，触发mutation
     addUserMutation.mutate(inputData);
   };
   

完整修改后的组件关键代码 #

const AddUser = () => {
  const [inputData, setInputData] = useState<UserData>({
    lastName: "",
    firstName: "",
    email: "",
    icons: "",
  });

  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  // 正确定义mutation
  const addUserMutation = useMutation({
    mutationFn: (userData: UserData) => UserService.post(userData),
    retry: false,
  });

  const onSubmit = async (event: { preventDefault: () => void }) => {
    event.preventDefault();
    handleClose();
    // 调用useMutation返回的mutate方法
    addUserMutation.mutate(inputData);
  };

  // 剩余组件逻辑...
};

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