如何将反应 formData 发送和保存到后端

Question

我正在使用 formData 将学生数据发送到后端并将其保存在 MongoDb 中。但我无法做到这一点。请有人帮忙解决这个问题

当输入所有字段并提交表单时，它会出现此错误（来自后端）

<块引用>

错误：“请填写所有字段”，

我还尝试删除字段要求检查。然后它给出一个错误 error: "Saving Student in DB failed",

**当我尝试使用邮递员时，它一切正常并将用户保存在 Db 中。提前致谢**

这是学生模型（后端）

const studentSchema = new mongoose.Schema(
  {
    Fullname: {
      type: String,
      required: true,
      trim: true,
    },
    AdmissionNumber: {
      type: String,
      required: true,
      trim: true,
      maxlength: 10,
      unique: true,
    },
    RollNumber: {
      type: Number,
      required: true,
      trim: true,
      maxlength: 4,
    },
    Age: {
      type: Number,
      required: true,
      maxlength: 2,
    },
    Gender: {
      type: String,
      enum: ["Male", "Female"],
    },
    Email: {
      type: String,
      trim: true,
      required: true,
      unique: true,
    },
    Faculty: {
      type: ObjectId,
      ref: "Faculty",
      required: true,
    },
    pass: {
      type: Number,
      default: 0,
    },
  },

  { timestamps: true }
);

用于添加学生的控制器（后端）

exports.addStudent = (req, res) => {
  let form = new formidable.IncomingForm();
  form.keepExtensions = true;

  form.parse(req, (err, fields) => {
    if (err) {
      res.status(400).json({
        error: "problem with feilds",
      });
    }

    // destructuring feilds
    const {
      Fullname,
      AdmissionNumber,
      RollNumber,
      Age,
      Email,
      Faculty,
    } = fields;
//checking for all feilds
    if (
      !Fullname ||
      !AdmissionNumber ||
      !RollNumber ||
      !Age ||
      !Email ||
      !Faculty
    ) {
      return res.status(400).json({
        error: "Please fill all fields",
      });
    }

    //   TODO: restriction on fields
    let student = new Student(fields);  //(Student-Model which is imported)

    student.save((err, student) => {
      if (err) {
        res.status(400).json({
          error: "Saving Student in DB failed",
        });
        console.log(err);
      }
      res.json(student);
    });
  });
};

用于添加学生的前端处理程序

export const createStudent = (userId, token, student) => {
  return fetch(`${API}/student/create/${userId}`, {
    method: "POST",
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${token}`,
    },
    body: student,
  })
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err));
};

添加学生表格

const AddStudent = () => {
  const { user, token, student } = isAuthenticated();
  const [values, setValues] = useState({
    Fullname: "",
    AdmissionNumber: "",
    RollNumber: "",
    Age: "",
    Gender: "",
    Faculty: "",
    Email: "",
    faculties: [],
    loading: "",
    error: "",
    success: "",
    getaRedirect: false,
    formData: "",
  });

  const {
    Fullname,
    AdmissionNumber,
    RollNumber,
    Age,
    Gender,
    Email,
    Faculty,
    faculties,
    loading,
    error,
    success,
    getaRedirect,
    formData,
  } = values;

  const preload = () => {
    getFaculties().then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({ ...values, faculties: data, formData: new FormData() });
      }
    });
  };

  useEffect(() => {
    preload();
  }, []);

  const onSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: "", loading: true });
    createStudent(user._id, token, student, formData).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          Fullname: "",
          AdmissionNumber: "",
          RollNumber: "",
          Age: "",
          Gender: "",
          Email: "",
          Faculty: "",
          // loading: false,
          // createdStudent: data.name,
        });
      }
    });
  };

  // const successMessage = () => (
  //   <div
  //     className="alert alert-success mt-3"
  //     style={{ display: createStudent ? "" : "none" }}
  //   >
  //     <h4>{createdStudent} </h4>
  //   </div>
  // );

  const errorMessage = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <div
            className="alert alert-success"
            style={{ display: error ? "" : "none" }}
          >
            {error}
          </div>
        </div>
      </div>
    );
  };

  const handleChange = (name) => (event) => {
    const value = event.target.value;
    formData.set(name, value);
    setValues({ ...values, [name]: event.target.value });
    console.log(value);
  };

  const addStudentForm = () => (
    <form>
      <div className="form-group mt-2">
        <input
          onChange={handleChange("Fullname")}
          name="Fullname"
          className="form-control"
          placeholder="FullName"
          value={Fullname}
          required
        />
      </div>
      <div className="row form-group">
        <div className=" col-md-6">
          <input
            onChange={handleChange("AdmissionNumber")}
            name="AdmissionNumber"
            className="form-control"
            placeholder="Admission Number"
            value={AdmissionNumber}
            required
            maxLength="5"
          />
        </div>
        <div className="  col-md-6">
          <input
            onChange={handleChange("RollNumber")}
            type="number"
            name="RollNumber"
            className="form-control"
            placeholder="Roll Number"
            value={RollNumber}
            required
            maxLength="5"
          />
        </div>
      </div>
      <div className="row ">
        <div className="form-group col-md-6  ">
          <input
            onChange={handleChange("Age")}
            type="number"
            name="Age"
            className="form-control"
            placeholder="Age"
            value={Age}
            maxLength="2"
            required
          />
        </div>
        <div className="form-group  col-md-6">
          <div className="form-check form-check-inline col-md-6">
            <input
              className=" form-control col-md-2"
              type="radio"
              value="Male"
              name={Gender}
              onChange={handleChange("Gender")}
            />

            <label className="form-check-lable ml-2"> Male </label>
          </div>
          <div className="form-check form-check-inline ">
            <input
              className=" form-control col-md-5 "
              type="radio"
              value="Female"
              name={Gender}
              onChange={handleChange("Gender")}
            />
            <lable className="form-check-lable ml-2">Female</lable>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="form-group col-md-4">
          <select
            onChange={handleChange("Faculty")}
            className="form-control"
            placeholder="Faculty"
            name="Faculty"
            value={Faculty}
          >
            <option>Select</option>
            {faculties &&
              faculties.map((faculty, index) => (
                <option key={index} value={faculty._id}>
                  {faculty.name}
                </option>
              ))}
          </select>
        </div>

        <div className="form-group col-md-8">
          <input
            type="email"
            onChange={handleChange("Email")}
            className="form-control"
            name="Email"
            value={Email}
            required
            placeholder="Enter Email"
          />
        </div>
      </div>