加载资源失败：服务器在 MERN 中响应状态为 422（不可处理实体）

Question

I am trying to make a MERN application in which user can register and store the user data in atlas. But when user submit the form the data is not saving in atlas and it is showing the error in console.

Failed to load resource: the server responded with a status of 422 (Unprocessable Entity)
Here is my React code for fetching data to the server:

  const submitter = async (e) => {
    e.preventDefault();
    const { name, email, phone, work, password, cpassword } = data;

    const response = await fetch("/signup", {
      method: "POST",
      Headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        email,
        phone,
        work,
        password,
        cpassword
      }),
    });
    const res = await response.json()

    if(res.status === 422 || !res){
      window.alert("Invalid Registration")
      console.log("Invalid Registration");
    }else{
      window.alert("Registration Successful")
      console.log("Registration Successful");

      history.push("/signin")
    }
  };

problem is this code redirects to signin page and show registration successful but it is not storing the data that I filled in the form.

My nodejs code:

router.post("/signup", async (req, res) => {
  const { name, email, phone, work, password, cpassword } = req.body;
  if (!name || !email || !phone || !work || !password || !cpassword) {
    return res.status(422).json({ error: "fill the form completely" });
  }
  try {
    const response = await user.findOne({ email: email });
    if (response) {
      return res.status(422).json({ err: "email already exists" });
    }
    if(password != cpassword){
      return res.status(422).json({ err: "passwords are not matching" });
    }else{
      const filldata = new user({
        name,
        email,
        phone,
        work,
        password,
        cpassword,
      });
      const data = await filldata.save(); 
      console.log(data);
  
      if (data) {
        res.status(201).json({ message: "user created succesfully" });
      } else {
        res.status(500).json({ error: "user registration failed" });
      }
    }
    
  } catch (err) {
    console.log(err);
  }
  
});

I have also used "proxy": "http://localhost:3001" in my package.json file

Answer 1

try this one

      if(res.status === 201){
          window.alert("Registration Successful")
          console.log("Registration Successful");
          history.push("/signin")
        }else{
        
  window.alert("Invalid Registration")
          console.log("Invalid Registration");
        }