POST 请求在 Postman 中有效但在浏览器中无效（MongoDB + ReactJS）

Question

我正在创建简单的表单应用程序，它将输入用户数据并将它们插入到 MongoDB 中。我正在使用 Axios 进行 CRUD 操作，并且所有操作都在后端工作（在 Postman 中测试）。当我创建前端部分 (ReactJS) 时，我设法显示所有用户并按 ID 删除它们。但是用于创建新用户的 POST 方法不起作用。我收到 500 内部服务器错误。

我也在使用 FormData 和 useState。但是调用 handleSubmit() 方法时，FormData 为空。

创建User.js

  const CreateUser = () => {
      const [firstName, setFirstName] = useState("");
      const [lastName, setLastName] = useState("");
      const [email, setEmail] = useState("");
   
      const submitHandler = (e) => {
        e.preventDefault(); 
    
        const formData = new FormData();
        formData.set("firstName", firstName);
        formData.set("lastName", lastName);
        formData.set("email", email);

        dispatch(createNewUser(formData)); //calling POST function from UserActions.js
      };

return (
    <form onSubmit={submitHandler}>
            <input
              type="text"
              placeholder="Enter your first name"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
            />
            <input
              type="text"
              placeholder="Enter your last name"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
            />
            <input
              type="email"
              placeholder="Enter your e-mail"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button className="button" type="submit">
              Create
            </button>
       </form>
  );
};

export default CreateUser;

此外，我使用 Redux 进行状态管理，因此我也设置了操作。

UserActions.js

export const createNewUser = (userData) => async (dispatch) => {
  try {
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };

    const { data } = await axios.post("/api/v1/user/new", userData, config);

    dispatch({
      payload: data
      
    });
  } catch (error) {
    console.log(error.response);
  }
};

控制台将显示消息 firstName lastName email 为空，因为它们的 require 值设置为 true。

const userSchema = new mongoose.Schema({
  firstName: {
    type: String,
    required: [true, "Please enter your first name"],
  }.....
module.exports = mongoose.model("User", userSchema);

但是当我使用 console.log() 在输入时检查它们的值时，效果很好。仅将这些值传递给 formData 是行不通的。还是我错过了其他东西？ 谢谢

TLDR：在使用 Axios POST 数据时尝试向 MongoDB 提交插入的值时 FormData 为空