0

我正在使用 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)
4

1 回答 1

0

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

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

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

于 2021-01-12T12:36:47.217 回答