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),
  });