type 的参数不能分配给 partial<> 类型的参数

Question

我正在尝试验证我的 Ionic 反应表单，但是在useForm方法中调用 validationSchema 时出现以下错误。 我在尝试调用useForm的 validationSchema 时遇到的错误是Argument of type '{ validationSchema: ...... is not assignable to parameter of type 'Partial<{ mode: "onBlur"...... useForm Argument of type '{ validationSchema: ...... is not assignable to parameter of type 'Partial<{ mode: "onBlur"......下面的参数是我的主登录表单的代码：

 import React, { useState } from "react"; import { IonPage, IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonAlert, IonItem, IonText, IonInput, IonLabel, IonRouterLink } from "@ionic/react"; import { RouteComponentProps } from 'react-router-dom'; import { LoginService } from "../services/LoginService"; import { LoginResonse } from 'common-models/APIResponses' import { setIsLoggedIn, setIsAdmin, setEmailAddress } from "../data/user/user.actions"; import { connect } from '../data/connect'; import '../css/app.scss'; import { useForm } from 'react-hook-form'; import LoginInput, {LoginInputProps } from "../components/loginInput"; import { object, string } from 'yup'; interface OwnProps extends RouteComponentProps {} interface DispatchProps { setIsLoggedIn: typeof setIsLoggedIn; setIsAdmin: typeof setIsAdmin; setEmailAddress: typeof setEmailAddress; } interface LoginProps extends OwnProps, DispatchProps { } const Login: React.FC<LoginProps>= ({setIsLoggedIn, setIsAdmin, history, setEmailAddress}) => { const validationSchema = object().shape({ emailAddress: string().required().email(), password: string().required() }); // const [inputEmailAddress, setInputEmailAddress] = useState(''); <---- (1) Also, setting the state to '' doesn't lets me type anything in the input field. // const [inputPassword, setInputPassword] = useState(''); const [showAlert, setShowAlert] = useState<boolean>(false); const [canLogin, setCanLogin] = useState<boolean>(false); const [formSubmitted, setFormSubmitted] = useState(false); const { control, handleSubmit} = useForm({ validationSchema, }); const formFields: LoginInputProps[] = [ { name: "emailAddress", component: <IonInput name="emailAddress" type="email" value="inputEmailAddress" spellCheck={false} autocapitalize="off" />, label: "Email Address" }, { name: "password", component: <IonInput name="password" type="password" value="inputPassword"/>, label: "Password" } ]; return ( <IonPage id="login-registration-page"> <IonHeader> <IonToolbar color="primary"> <IonTitle>Login</IonTitle> </IonToolbar> </IonHeader> <IonContent> <form className="login-registration-form ion-padding" onSubmit={handleSubmit(loginUser)}> {formFields.map((field, index) => ( <LoginInput {...field} control={control} key={index} /> ))} <IonItem lines="none"> <IonRouterLink className="link" routerLink={'/forgot_username'}>Forgot Username?</IonRouterLink> </IonItem> <IonItem lines="none"> <IonRouterLink className="link" routerLink={'/forgot_password'}>Forgot Password?</IonRouterLink> </IonItem> <IonButton disabled={!canLogin} expand="block">Login</IonButton> </form> <IonAlert isOpen={showAlert} backdropDismiss={false} onDidDismiss={() => setShowAlert(false)} header={"EmailAddress or Password is incorrect."} buttons={[ { text: "OK", } ]} /> </IonContent> </IonPage> ); }; export default connect<OwnProps, {}, DispatchProps>({ mapDispatchToProps: { setIsLoggedIn, setIsAdmin, setEmailAddress }, component: Login })

我主要关注中间件（API 开发）和后端。 前端方面不多。 如果我的问题没有正确表达，我深表歉意。

此外，如果我将状态设置为'' ，我将无法在输入字段中输入任何内容，请参阅以 (1) 开头的评论。

我用来设置 loginProps（loginInput.ts 文件）的接口是：

 import React, { FC } from "react"; import { IonItem, IonInput, IonLabel} from "@ionic/react"; import { Controller, Control } from "react-hook-form"; export interface LoginInputProps { name: string; control?: Control; label?: string; component?: JSX.Element; } const LoginInput: FC<LoginInputProps> = ({ name, control, component, label })=>{ return ( <> <IonItem> {label && ( <IonLabel position="stacked">{label}</IonLabel> )} <Controller as={component ?? <IonInput />} name={name} control={control} onChangeName="onIonChange" /> </IonItem> </> ); }; export default LoginInput;

Answer 1

react-hook-form 已更新，您现在需要使用模式解析器

https://react-hook-form.com/get-started#SchemaValidation

  const { control, handleSubmit} = useForm({
     resolver: yupResolver(validationSchema),
  });