使用react redux提交表单

cld4siwp  于 2022-11-12  发布在  React
关注(0)|答案(1)|浏览(165)

我用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;

我怎样才能解决这个问题呢?

hi3rlvi2

hi3rlvi21#

不幸的是,我还不能发表评论,但我有一个建议。我不是很熟悉useForm钩子,但我在你的onSubmit函数中看到,如果pagesignUp,你将只执行一个console.log消息。也许你也应该在这个条件中添加一些调度。

相关问题