如何在onSubmit事件中使用react-query useQuery？

Question

我是菜鸟，使用react query并使用typesript进行反应，我不知道如何解决这个问题： 在函数“onSubmit”中调用React Hook“useQuery”，它既不是React函数组件，也不是自定义React Hook函数。React 组件名称必须以大写字母开头。

export const LoginForm = () => { 

    const { handleSubmit, control } = useForm<IFormInput>({defaultValues: defaultValues, resolver: yupResolver(schema)});


    const onSubmit = ({email, password}: IFormInput) => {
        const {data, isLoading, error} = useQuery('loginUser', () => startLogin({email, password}));
        console.log(data);
        console.log(error);
    };

    ...
    ...
    ...
}

export const startLogin = ({email, password}: IFormInput) => (
    axios.post(loginEndpoint, {email, password}).then(res => res.data)
);

Answer 1

我\xe2\x80\x99d 喜欢添加用于登录用户的内容，您可能不\xe2\x80\x99d 想要查询而是突变。让某人登录可能不是 GET 请求，并且它有副作用（它使用户登录），因此useMutation也是如此。您可以在功能组件的顶部定义useMutation（根据钩子规则）并mutate在回调中调用返回的函数：

\n

export const LoginForm = () => { \n    const { mutate, isLoading } = useMutation(variables => startLogin(variables))\n    \n    const onSubmit = ({email, password}: IFormInput) => {\n       mutate({ email, password })\n    };\n

\n