react-hook-form Controller 中的“as”中的离子反应错误

Question

我是离子的新手。 我通过 react-hook-form Controller 创建了一个简单的表单，其中包含标题和消息字段。 以至于在“as”中出现了错误

在这里找到图片

CMD 中的错误消息

import * as  React from "react";
import { IonCard, IonCardContent, IonCardHeader, IonContent, IonHeader, IonTextarea, IonInput, IonLabel, IonPage, IonItem, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { Controller, useForm } from "react-hook-form";

const Home: React.FC = () => {
  
  const initialValues = {
    title: "",
    body: ""
  }

  const { control, reset, handleSubmit, formState} = useForm({
    defaultValues: initialValues
  });

  const onSubmit = (data: any) => {
    alert(JSON.stringify(data, null, 2));
  }

  const resetForm = () => {
    reset(initialValues);
  }

  // const renderErrorMessage = (_key : string ) => {
  //   let theErrors = (errors as any)[_key];
  //   return <span>theErrors.message || "This Is A Required Field"</span>
  // } 
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle size="large">Form Test - React Hook Form</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonCard>
          <IonCardHeader>Test Input Form</IonCardHeader>
        </IonCard>

        <IonCardContent>
          <form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
              <IonLabel>Title</IonLabel>
              <Controller
                as = {IonInput}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="title"
                rules={{
                  required: true,
                  minLength: { value: 4, message: "Must be 4 chars long" }
                }}
              />
              
            </IonItem>
                {/* {errors.title ? renderErrorMessage("title") : null} */}
            <IonItem>
              <IonLabel>Body</IonLabel>
              <Controller
                as = {<IonTextarea rows={5}></IonTextarea>}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="body"
                rules={{
                  required: true,
                  minLength: { value: 10, message: "Must be 10 chars long" }
                }}
              />
              
            </IonItem>
            {/* {errors.body ? renderErrorMessage("body") : null} */}
            <IonButton type="submit">SAVE</IonButton>
            <IonButton onClick={() => resetForm()}>Reset Form</IonButton>
          </form>
        </IonCardContent>

      </IonContent>
    </IonPage>
  );
};

export default Home;

Visual Studio Code 在定义输入字段时在 Controller 标记中的 as 关键字下方显示错误行。 我已经安装了 react-hook-form 库

离子：

离子 CLI：6.18.1 离子框架：@ionic/react 6.0.1

电容器：

电容器 CLI：3.3.3 @capacitor/android：未安装 @capacitor/core：3.3.3 @capacitor/ios：未安装

效用：

cordova-res：未全局安装本机运行：1.5.0

系统：

NodeJS: v16.13.1 (C:\Program Files\nodejs\node.exe) npm: 8.1.2 操作系统: Windows 10

Answer 1

在 react-hook-form v7 中删除了as道具，这就是你得到这个错误。 （假设您使用的是 v7）。 你必须使用render道具。

Controller 文档： https://react-hook-form.com/api/usecontroller/controller