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

问题描述

我正在尝试验证我的离子反应形式，但是在useForm方法中调用validateSchema时遇到以下错误。我尝试在useForm中调用validateSchema时遇到的错误是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,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,setEmailAddress
  },component: Login
})

我主要关注中间件（API开发）和后端。前端侧不多。抱歉，如果我的问题提出的内容不正确。

此外，如果我将状态设置为''，则无法在输入字段中输入任何内容。请参阅以（1）开头的注释。

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

import React,{ FC } from "react";
import { IonItem,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;

解决方法

react-hook-form已更新，您需要立即使用架构解析器

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

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