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

Posted 2023-03-13

【中文标题】如何在 onSubmit 事件中使用 react-query useQuery？

【英文标题】：How to use react-query useQuery inside onSubmit event?

【发布时间】：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 我认为您需要将组件重命名为大写首字母。

【参考方案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 可以解决此问题。