i check backend code using postman,it is working.name,email,password store in database using postman.but when i put name,email,password in signup form then if show this error----- User validation failed: password: Please Enter Your Password, email: Please Enter Your Email, name: Please Enter Your Name

userModel.js

const mongoose = require("mongoose");
const validator = require("validator");

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, "Please Enter Your Name"],
    maxLength: [30, "Name cannot exceed 30 characters"],
    minLength: [4, "Name should have more than 4 characters"],
  },
  email: {
    type: String,
    required: [true, "Please Enter Your Email"],
    unique: true,
    validate: [validator.isEmail, "Please Enter a valid Email"],
  },
  password: {
    type: String,
    required: [true, "Please Enter Your Password"],
    minLength: [8, "Password should be greater than 8 characters"],
    select: false,
  },
  role: {
    type: String,
    default: "user",
  },
  resetPasswordToken: String,
  resetPasswordExpire: Date,
});
module.exports = mongoose.model("User", userSchema);

catchAsyncErrors.js

module.exports = (theFunc) => (req, res, next) => {
    Promise.resolve(theFunc(req, res, next)).catch(next);
  };

userController.js

exports.registerUser = catchAsyncErrors(async (req, res, next) => {
    
 const user = await User.create(req.body);
    
    res.status(201).json({
        success:true,
        user,
    });
});

userRoute.js

router.route("/register").post(registerUser);

userReducer.js

export const userSignupReducer = (state = { user: {} }, action) => {
  switch (action.type) {
    case REGISTER_USER_REQUEST:
      return {
        loading: true,
        isAuthenticated: false,
      };

    case REGISTER_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        isAuthenticated: true,
        user: action.payload,
      };

    case REGISTER_USER_FAIL:
      return {
        ...state,
        loading: false,
        isAuthenticated: false,
        user: null,
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

userAction.js

export const register = (userData) => async (dispatch) => {
  try {
    dispatch({ type: REGISTER_USER_REQUEST });

    const { data } = await axios.post(`/api/v1/register`, userData);

    dispatch({ type: REGISTER_USER_SUCCESS, payload: data.user });
  } catch (error) {
    dispatch({
      type: REGISTER_USER_FAIL,
      payload: error.response.data.message,
    });
  }
};

store.js

...
...
const reducer = combineReducers({
userSignup:userSignupReducer,
});
...
...

Signup.js

import React, { Fragment, useState, useEffect } from "react";
import Loader from "../Loader/Loader";
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from "react-redux";
import { clearErrors, register } from "../../actions/userAction";

const SignUp = () => {
  const dispatch = useDispatch();
  const { error, loading } = useSelector(
    (state) => state.userSignup
  );

  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });

  const { name, email, password } = user;


  const registerSubmit = (e) => {
    e.preventDefault();

    const myForm = new FormData();

    myForm.set("name", name);
    myForm.set("email", email);
    myForm.set("password", password);
    dispatch(register(myForm));
  };

  const registerDataChange = (e) => {
    if (e.target.name === "name" || e.target.name === "email" || e.target.name === "password") {
      setUser({ ...user, [e.target.name]: e.target.value });
    }
  };

  useEffect(() => {
    if (error) {
      alert(error);
      dispatch(clearErrors());
    }
  }, [dispatch, error]);

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <div className="LoginSignUpContainer">
            <div className="LoginSignUpBox">
              <h1 className='logintp'>Signup</h1>
              <h4 className='logintpo'>Please fill in this form to create an account!</h4>
              <form
                className="signUpForm"
                encType="multipart/form-data"
                onSubmit={registerSubmit}
              >
                <div className="signUpName">
                  <input className="nosmart"
                    type="text"
                    placeholder="Name"
                    required
                    name="name"
                    value={name}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpEmail">
                  <input className="nosmart"
                    type="email"
                    placeholder="Email"
                    required
                    name="email"
                    value={email}
                    onChange={registerDataChange}
                  />
                </div>
                <div className="signUpPassword">
                  <input className="nosmart"
                    type="password"
                    placeholder="Password"
                    required
                    name="password"
                    value={password}
                    onChange={registerDataChange}
                  />
                </div>
                <input type="submit" value="Register" className="signUpBtn" />

                <div className='asign'>
                  <h4>Already have an account?</h4> <h4 >
                    <Link className='signupfm' to='/login'> Login</Link>
                  </h4>
                </div>
              </form>
            </div>
          </div>
        </Fragment>
      )}
    </Fragment>
  );
};
export default SignUp;

CodePudding user response：

Your problem is here...

const myForm = new FormData();

myForm.set("name", name);
myForm.set("email", email);
myForm.set("password", password);
dispatch(register(myForm));

Using FormData posts the request body as multipart/form-data. To handle such a request, you need specialised middleware like Multer.

Typically, unless you're uploading files, you'll want to deal with either application/json or application/x-www-form-urlencoded request bodies and have them handled by the following middleware

app.use(express.json()); // application/json
app.use(express.urlencoded()); // application/x-www-form-urlencoded

To post data as JSON, simply pass in a plain JavaScript object

dispatch(register({ name, email, password }));

To post data as urlencoded, pass in a URLSearchParams instance

dispatch(register(new URLSearchParams({ name, email, password })));