Warning: An unhandled error was caught from submitForm() Error:

Warning: An unhandled error was caught from submitForm() Error:

我正在用 react、nextjs 和 typescript 开始一个项目，我正在尝试向我的后端提交一个表单，但是当我尝试使用该函数来调用由 @urql-codegen 生成的函数时，我得到了以下警告， formik.esm.js:925 警告：从 submitForm() 错误中捕获了一个未处理的错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

  1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  3. 您可能在同一个应用程序中有多个 React 副本

和查询，但查询不会触发

我的错误在哪里我不知道该怎么办

下面的代码

   import React from 'react';
import { Formik, Form, Field, FormikHelpers } from 'formik';
import Wrapper from '../components/Wrapper';
import InputField from '../components/InputField';
import { toErrorMap } from '../utils/toErrorMap';
import { useRouter } from 'next/router';
import { createUrqlClient } from '../utils/createUrqlClient';
import { withUrqlClient } from "next-urql"
import { Button, LinearProgress, Grid } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { TextField } from 'formik-material-ui';
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
//import { useLoginUsuarioQuery } from '../generated/graphql';
import { useQuery } from 'urql';
import { useUserByIdQuery } from '../generated/graphql';

const Login: React.FC<{}> = ({ }) => {
  const router = useRouter();
  const classes = useStyles();
  
  const submitForm = ({username,password}) => {
    const [{data}] = useUserByIdQuery({variables:{id:1}});
    console.log(data);
  }    

  return (
    <Grid container component="main" className={classes.root}>
      <Grid item xs={false} sm={4} md={7} className={classes.image}></Grid>
      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square >
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            M
                </Avatar>
          <Typography component="h1" variant="h5">
            Ingresar
                </Typography>
          <Formik
            initialValues={{ username: '', password: '' }}
            onSubmit={(values) => {submitForm(values)}}
          >
            {({ isSubmitting }) => (
              <Form className={classes.form}>
                <Field
                  component={TextField}
                  name="username"
                  type="text"
                  label="username"
                  variant="outlined"
                  className={classes.form}
                />
                <br />
                <Field
                  component={TextField}
                  type="password"
                  label="Password"
                  name="password"
                  variant="outlined"
                  className={classes.form}
                />
                {isSubmitting && <LinearProgress />}
                <br />
                <Button
                  variant="contained"
                  color="primary"
                  disabled={isSubmitting}
                  type="submit"
                  className={classes.form}

                >
                  Submit
                </Button>
              </Form>
            )}
          </Formik>
        </div>
      </Grid>
    </Grid>


  );

}


export default withUrqlClient(createUrqlClient)(Login)

您似乎在 submitForm 中调用 useUserByIdQuery，这是一个回调。按照命名约定，前者是一个只能由您的组件直接调用的钩子，根据 React 的“钩子规则”https://reactjs.org/docs/hooks-rules.html

我看到您正在使用由（可能）GraphQL 代码生成器生成的查询，它为您提供了一个用于获取“按 ID 的用户”的挂钩。我假设您希望在用户提交此登录表单时强制执行此调用。为此，根据您想执行的操作，您要么必须强制查询，要么添加一些状态。

如果您正在处理登录，前者更有可能，因为我想您将来可能希望进行登录更改。在这种情况下，您可以使用 client.query(...).toPromise() 使用 urql 客户端，但您必须手动传递查询，或者您可以使用 useUserByIdQuery 并将 pause: true 作为参数传递并使用返回的 executeQuery 函数给它一个 ID。