我用redux为每个注册/登录实现了一个单独的表单我在尝试用表单提交数据之前用postman测试了apis,所以登录表单工作正常,但是当我尝试提交注册表单时什么也没发生,只是我在导航器控制台中得到了控制台日志消息。form.js
import React, { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types";
import { useForm } from "react-hook-form";
import { login } from "../../redux/index";
import loginSvg from "../../images/Login-amico.svg";
import signUpSvg from "../../images/signup.svg";
function Form({ page }) {
const dispatch = useDispatch();
const navigate = useNavigate();
const userLogin = useSelector((state) => state.userLogin);
const { error: loginError, loading: loginLoading, userInfo } = userLogin;
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
if (page !== "signUp") {
dispatch(login(data.email, data.password));
} else {
console.log("smthg else");
}
};
useEffect(() => {
if (userInfo) {
navigate("/app/dashboard", { replace: true });
}
}, [navigate, userInfo]);
return (
<form onSubmit={handleSubmit(onSubmit)} >
{page === "signUp" ? (
<div className="mb-3">
<label>User Name</label>
<input
type="text"
className="form-control"
placeholder="user name"
{...register("userName", {
required: true,
className:
"form-control form-control-lg",
type: "text",
placeholder: "User Name",
})}
/>
</div>
) : undefined}
<div className="mb-3">
<label>Email address</label>
<input
type="email"
className="form-control"
placeholder="Enter email"
{...register("email", {
required: true,
className: "form-control",
type: "email",
placeholder: "Email address",
})}
/>
</div>
<div className="mb-3">
<label>Password</label>
<input
type="password"
className="form-control"
placeholder="Enter password"
{...register("password", {
required: true,
className: "form-control",
type: "password",
placeholder: "Password",
})}
/>
</div>
<div className="d-grid">
<button type="submit" className="btn btn-primary">
Submit
</button>
</div>
<p className="forgot-password text-right">
Already registered <a href="/sign-in">sign in?</a>
</p>
</form>
);
}
Form.propTypes = {
page: PropTypes.string.isRequired,
};
export default Form;
我怎样才能解决这个问题呢?
1条答案
按热度按时间hi3rlvi21#
不幸的是,我还不能发表评论,但我有一个建议。我不是很熟悉useForm钩子,但我在你的onSubmit函数中看到,如果
page
是signUp
,你将只执行一个console.log消息。也许你也应该在这个条件中添加一些调度。