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

【问题标题】：How to use react-query useQuery inside onSubmit event?如何在 onSubmit 事件中使用 react-query useQuery？
【发布时间】：2021-10-14 12:33:45
【问题描述】：

im noob 使用反应查询并使用打字机反应，我不知道如何解决这个问题： React Hook "useQuery" 在函数 "onSubmit" 中被调用，该函数既不是 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)
);

【问题讨论】：

React component names must start with an uppercase letter 我认为您需要将组件重命名为大写首字母。

标签： reactjs typescript react-hooks react-query

【解决方案1】：

我想添加一个用于登录用户的功能，您可能不需要查询，而是需要突变。让某人登录可能不是 GET 请求，并且它有副作用（它使用户登录），所以useMutation 就是为此。你可以在你的功能组件顶部定义useMutation（按照钩子的规则），并在回调中调用返回的mutate函数：

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

【讨论】：

【解决方案2】：

首先，问题只是一个 eslint react 插件 (rules-of-hooks) 抱怨你使用了钩子。

您可以通过在发生错误的行上方添加以下注释来告诉它关闭：

// eslint-disable-line react-hooks/rules-of-hooks

但是……

这只会妨碍你理解在 react 中使用钩子的正确方法。在继续进行上述操作之前，这是处理用例的正确方法。

首先将钩子移到函数外，而不是useQuery，使用useMutation：

export const LoginForm = () => { 

    const { handleSubmit, control } = useForm<IFormInput>({defaultValues: defaultValues, resolver: yupResolver(schema)});
    const { data, error, mutate: loginUser } = useMutation(startLogin);


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

现在已经完成了，正如我之前提到的，你从 eslint 收到投诉的原因是因为 rules-of-hooks 插件有明确的废话规则，它假定任何以 use* 开头的函数都必须是一个反应钩子。它还假设这样的函数只在反应组件内部使用，因此消息的一部分说：

React 组件名称必须以大写字母开头。

解释了此规则存在的原因here。基本上它归结为以下几点：

rules-of-hooks 假定任何自定义的 react 钩子都将使用现有的 react 钩子之一（useEffect、useState、useMemo 等），并且由于这些钩子会影响组件的状态，因此假设您的自定义钩子确实如此（即使您可能没有编写 useQuery 钩子）。
React 功能组件依赖钩子的顺序来维护状态。如果在组件渲染期间的任何时候该顺序被破坏，组件将无法保持其内部状态。

因此，请在组件顶部指定所有潜在的突变。

【讨论】：

【解决方案3】：

您的 onSubmit() 看起来不像在 React 组件中被执行，您还需要将组件重命名为 PascalCase。

在大多数情况下，将您的组件重命名为 PascalCase 可以解决此问题。

【讨论】：