使用 React-Hook-Form 和 YupResolver 时遇到此错误：尝试导入错误：'set' 未从 'react-hook-form' 导出导入为 'o'

如何解决使用 React-Hook-Form 和 YupResolver 时遇到此错误：尝试导入错误：'set' 未从 'react-hook-form' 导出导入为 'o'

我正在使用 Capacitor、Ionic、React 开发应用程序，最近我在第一次使用 React Hook Form 和 YupResolver 时遇到了以下错误：

当我尝试运行该项目时，出现此错误：

Failed to compile
./node_modules/@hookform/resolvers/dist/resolvers.module.js
Attempted import error: 'set' is not exported from 'react-hook-form' (imported as 'o').

我想创建并验证用于更改密码的表单，将新密码提交给外部 API /change-password。表格将如下所示：

Actual Password: ...
New Password: ...
Confirm new Password: ...

Submit

组件：

import {
  IonContent,IonPage,IonItem,IonLabel,IonButton,IonInput,IonRow,IonAlert,IonGrid,IonCol,} from "@ionic/react";
import React,{ useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import axios from "axios";

 // form validation rules
  const validationSchema = yup.object().shape({
    password: yup
      .string()
      .min(8,"Password must be at least 8 characters")
      .required("Password is required"),newPassword: yup
      .string()
      .min(8,"Password must be at least 8 characters")
      .required("New Password is required"),confirmPassword: yup
      .string()
      .oneOf([yup.ref("newPassword"),null],"Passwords must match")
      .required("Confirm Password is required"),});

const ChangePassword: React.FC = () => {

//get the actual password from React Contenxt
  const {
    password,setPassword,alertMessage,setAlertMessage,} = React.useContext(AuthContext);

  const [newPassword,setNewPassword] = useState("");
  const [confirmPassword,setConfirmPassword] = useState(""); 

  // functions to build form returned by useForm() hook
  const { register,handleSubmit,errors } = useForm({
    resolver: yupResolver(validationSchema),});

  const onSubmit = () => {
    const data = {
      oldPassword: password,newPassword: newPassword,sourceId: 1,};

    axios
      .post("change-password",data)
      .then((response) => {
        return response.data;
      });
  };

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
          <IonGrid>  
            <h3>Change Password</h3>

            <form onSubmit={handleSubmit(onSubmit)}>
              <IonItem>
                <IonLabel position="floating">Actual Password</IonLabel>
                <IonInput
                  name="password"
                  type="password"
                  value={password}
                  ref={register}
                  className={`form-control ${
                    errors.password ? "is-invalid" : ""
                  }`}
                  onIonChange={(e) => setPassword(e.detail.value!)}
                ></IonInput>
                <div className="invalid-Feedback">
                  {errors.password?.message}
                </div>
              </IonItem>

              <IonItem>
                <IonLabel position="floating">New Password</IonLabel>
                <IonInput
                  name="newPassword"
                  type="password"
                  value={newPassword}
                  ref={register}
                  className={`form-control ${
                    errors.newPassword ? "is-invalid" : ""
                  }`}
                  onIonChange={(e) => setNewPassword(e.detail.value!)}
                ></IonInput>
                <div className="invalid-Feedback">
                  {errors.newPassword?.message}
                </div>
              </IonItem>

              <IonItem>
                <IonLabel position="floating">
                  Cofirm New Password
                </IonLabel>
                <IonInput
                  name="confirmPassword"
                  type="password"
                  value={confirmPassword}
                  ref={register}
                  className={`form-control ${
                    errors.confirmPassword ? "is-invalid" : ""
                  }`}
                  onIonChange={(e) => setConfirmPassword(e.detail.value!)}
                ></IonInput>
                <div className="invalid-Feedback">
                  {errors.confirmPassword?.message}
                </div>
              </IonItem>

              <IonButton type="submit">
                Submit
              </IonButton>
            </form>
          </IonGrid>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default ChangePassword;

@hookform/resolvers@2.4.0
yup@0.32.9
react-hook-form@6.15.6

任何帮助将不胜感激。谢谢！

解决方法

react-hook-form 改变了做事的方式。此外，您不需要自己跟踪这些值，您可以从 react-hook-form 中获取它们。

此代码经过测试且有效 - 请参阅此处的链接 - https://codesandbox.io/s/react-hook-form-fieldsarray-yup-validation-min-length-forked-rccmg?file=/src/index.js:0-1934

import React from "react";
import ReactDOM from "react-dom";
import { useForm,useFieldArray } from "react-hook-form";
import { object,ref,string } from "yup";
import { yupResolver } from "@hookform/resolvers";
// import "./styles.css";
import "@ionic/react/css/core.css";

import {
  IonContent,IonPage,IonItem,IonLabel,IonButton,IonInput
} from "@ionic/react";

const validationSchema = object().shape({
  password: string()
    .min(8,"Password must be at least 6 characters")
    .required("Password is required"),newPassword: string()
    .oneOf([ref("password"),null],"Passwords must match")
    .required("New Password is required"),confirmPassword: string()
    .oneOf([ref("newPassword"),"Passwords must match")
    .required("Confirm Password is required")
});

function App() {
  const { register,errors,handleSubmit,getValues } = useForm({
    mode: "onChange",resolver: yupResolver(validationSchema)
  });

  return (
    <IonPage>
      <IonContent>
        <form onSubmit={handleSubmit(console.log)}>
          <IonItem>
            <IonLabel>PASSWORD</IonLabel>
            <IonInput name="password" type="text" ref={register}></IonInput>
          </IonItem>

          <IonItem>
            <IonLabel>NEW PASSWORD</IonLabel>
            <IonInput name="newPassword" type="text" ref={register}></IonInput>
          </IonItem>

          <IonItem>
            <IonLabel>CONFIRM PASSWORD</IonLabel>
            <IonInput
              name="confirmPassword"
              type="text"
              ref={register}
            ></IonInput>
          </IonItem>

          <pre>Errors: {JSON.stringify(errors,null,2)}</pre>
          <pre>Values: {JSON.stringify(getValues(),2)}</pre>
          <input type="submit" />
        </form>
      </IonContent>
    </IonPage>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

,

我没有找到专门针对此错误的解决方案。所以我决定继续实施并将 RHF 从 6.x.x 升级到最新版本 7.1.1，因为我也在使用最新版本的 Resolvers。 https://react-hook-form.com/migrate-v6-to-v7/ 我还根据 RHF 版本 7 文档调整了实现： https://react-hook-form.com/api/useform

现在它可以正常工作了。

,

我在使用 react-hook-form v6.16.5 和 @hookform/resolvers v2.5.2 时遇到了这个问题

我将 @hookform/resolvers 降级到 v1.3.7，现在可以使用了。