reactjs - 警告:从 submitForm() 捕获到未处理的错误错误:
问题描述
我正在使用 react、nextjs 和 typescript 开始一个项目,我正在尝试向我的后端提交一个表单,但是当尝试使用该函数来调用使用 @urql-codegen 生成的函数时,我收到以下警告,formik .esm.js:925 警告:从 submitForm() 捕获到未处理的错误错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:
- 你可能有不匹配的 React 版本和渲染器(例如 React DOM)
- 您可能违反了 Hooks 规则
- 你可能在同一个应用程序中拥有多个 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)
解决方案
看起来您正在调用useUserByIdQuery
inside submitForm
,这是一个回调。根据命名约定,前者是一个只能由您的组件直接调用的钩子,根据 React 的“钩子规则” https://reactjs.org/docs/hooks-rules.html
我看到您正在使用由(可能)GraphQL 代码生成器生成的查询,它为您提供了一个用于获取“用户 ID”的钩子。我假设您希望在用户提交此登录表单时强制执行此调用。要实现这一点,取决于您想要做什么,您要么必须强制进行查询,要么添加一些状态。
如果您正在处理登录,则前者更有可能,因为我认为将来您可能希望进行登录突变。在这种情况下,您可以使用client.query(...).toPromise()
客户urql
端,但您必须手动传递查询,或者您可以使用useUserByIdQuery
和传递pause: true
作为参数并使用返回的executeQuery
函数给它一个 ID。
推荐阅读
- python - 如何从pyspark中的特定目录加载模块
- scala - 在 IntelliJ 中工作的 Scala 代码在 Scala 的 REPL 中失败
- java - java android中的文件
- bugzilla - 标头中的 Bugzilla 5.0 REST API 身份验证
- coq - Ltac 中是否可以“printf-debugging”?
- python - Kivy 无法获得窗口,中止
- javascript - react-native:分享 api 传递 base64 字符串而不是图像到 WhatsApp
- c# - DataWriter/DataReader 关系
- android - Android - RecyclerView 被 BottomNavigationView 遮挡
- javascript - 如何在 PWA 和 ReactJS 中创建动态 manifest.json 文件?