【发布时间】：2021-07-13 09:13:42
【问题描述】：
我正在使用 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/resolvers 存储库中的 the peerDependencies 时，您需要使用 react-hook-form ^7.0.0
-
这不是真的，工作代码沙箱示例没有运行版本 7
-
@AaronSaunders 沙箱中的代码也没有使用与 OP 代码相同的版本。我不是说你不能让它在旧版本上工作，我只是说如果你要使用@hookform/resolvers ^2.4.0，那么你需要使用 react-hook-form ^ 7.0.0
-
@Adam，我也是这么想的，我发现没有其他办法继续前进，所以我从 6.15.6 升级到了 7.1.1 react-hook-form.com/migrate-v6-to-v7。谢谢:)
标签： reactjs typescript ionic-framework yup react-hook-form