如何从表单提交时的反应查询将输入发送到 useMutation 挂钩？

Question

我试图在表单提交上调用一个突变，用于登录用户，我试图调用的函数是这样的：

export const login = async (email : string , password : string) => {
  
  const response = await  axios.post(`${BASE_URL}/users/login` , {"user":{email:email, password:password}});

  return response.data;

}

我正在尝试使用以下代码调用它：

  const { mutate, isLoading , error} = useMutation(variables => login(variables.email , variables.password))

我提交的表单如下所示：

  onSubmit={(values) => {
    console.log(values);
    mutate({email : values.email , password:values.password});
  }} 

但我这样做时遇到多个错误，正确的方法是什么？

错误是：类型“void”上不存在属性“email”。

类型“void”上不存在属性“password”。

类型为 '{ email: string; 的参数 密码：字符串；}' 不可分配给“void”类型的参数。

Answer 1

您没有variables输入您的mutationFn，因此它们被推断为void。

最好直接输入注释进入mutationFn的参数：

const { mutate, isLoading , error} = useMutation(
  (variables: { email: string; password: string}) => login(variables.email , variables.password)
)

看看这个打字稿游乐场

login如果您的函数已经接受一个对象，那么所有这些都会更好，因为这样您就可以将login其作为mutationFn本身传递：

export const login = async ({email, password }: { email: string; password: string}) => {
  
  const response = await  axios.post(`${BASE_URL}/users/login` , {"user":{email:email, password:password}});

  return response.data;

}
      
const { mutate, isLoading , error} = useMutation(login)

看看这个打字稿游乐场

当然，这假设您可以控制该login功能并且可以按照您的意愿塑造它。如果情况并非如此，则映射是必要的，因为该mutate函数只能采用一个参数。