Axios 對 Mongodb 的 POST 請求不起作用

Question

我的 React Bootstrap 應用程序中有一個注冊模式，允許新用戶注冊。 我為要存儲在數據庫中的每個屬性設置了一個 onChange 事件，如果單擊“注冊”按鈕，則應將用戶保存到 db，從而觸發 onClick 按鈕。 問題是，用戶根本不會被保存到 Mongodb。 我確定問題出在 SignUpModal 代碼中，因為我確實嘗試通過 index.js 上的 node.js 傳遞它並且它有效。 代碼如下：

SignUpModal.js（客戶端）

  const [userEmail, setEmail] = useState("");
  const [userPassword, setPassword] = useState("");
  const [userFullName, setFullName] = useState("");
  const [userType, setType] = useState("");

//add user to database
  const addUser = () => {
    Axios.post("/addUser", {
      userEmail: userEmail,
      userPassword: userPassword,
      userFullName: userFullName,
      userType: userType,
    });
  };

    return(
        <Modal
          {...props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Sign Up Form
            </Modal.Title>
          </Modal.Header>
          <Form>
          <Modal.Body>
                <Form.Group className="mb-3" controlId="userEmail">
                    <Form.Label>Email address</Form.Label>
                    <Form.Control type="email" placeholder="Enter your email here"  
                        onChange = {(event) => {
                          setEmail(event.target.value);
                        }}
                      />
                </Form.Group>

                <Form.Group className="mb-3" controlId="userPassword">
                    <Form.Label>Password</Form.Label>
                    <Form.Control type="password" placeholder="Enter your password here" 
                    onChange = {(event) => {
                      setPassword(event.target.value);
                    }}
                    />
                </Form.Group>

                <Form.Group className="mb-3" controlId="userFullName">
                    <Form.Label>Full Name</Form.Label>
                    <Form.Control type="text" placeholder="Enter full name here" 
                    onChange = {(event) => {
                      setFullName(event.target.value);
                    }}
                    />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formType">
                    <Form.Label>I am a... (Tick one of the options below):</Form.Label>
                    {['radio'].map((type) => (
                        <div key={`inline-${type}`} className="mb-3">
                        <Form.Check
                            inline
                            label="Client"
                            name="group1"
                            type={type}
                            id={`inline-${type}-1`}
                            onChange = {(event) => {
                              setType(event.target.value);
                            }}
                        />
                        <Form.Check
                            inline
                            label="Service provider"
                            name="group1"
                            type={type}
                            id={`inline-${type}-2`}
                            onChange = {(event) => {
                              setType(event.target.value);
                            }}
                        />
                        </div>
                        ))}
                </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={props.onHide}>Close</Button>
            <Button variant="primary" type="submit" onClick= {addUser}>
                    Sign Up
            </Button>
          </Modal.Footer>
          </Form>
        </Modal>
)
}

index.js（服務器端）

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const UserModel = require("./models/User");

const cors = require("cors");

app.use(express.json());
app.use(cors());


mongoose.connect("mongodb+srv://tryweb:password1234@cluster5.c58gv.mongodb.net/user?retryWrites=true&w=majority", 
    {
    useNewUrlParser: true,
});

app.post("/addUser", async(req, res) => {

    const user = new UserModel(
        {   userEmail: req.body.userEmail, 
            userPassword: req.body.userPassword, 
            userFullName: req.body.userFullName, 
            userType: req.body.userType
        }
    );

    try{
        await user.save();
    }
        catch(err){
            console.log(err);
    }
});

app.listen(3000, () => {
    console.log("Server running in port 3000...");
});

我嘗試將 URL 更改為http://localhost:3000/addUser ，但它仍然無法正常工作。 任何人都知道我做錯了什么？

Answer 1

這看起來不錯，但您可能會在數據或瀏覽器中遇到錯誤。 嘗試使用console.log(req.body)在請求中記錄數據。

嘗試這個：

假設您的./models/User看起來像這樣：

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

let User = new Schema(
  {
    userEmail: {
      type: String
    },
    userPassword: {
      type: String
    },
    userFullName: {
      type: String
    },
    userType: {
      type: String
    }
  },
  { collection: "Users" }
);

module.exports = mongoose.model("User", User);

和代碼：

const express = require("express");
const app = express();
const mongoose = require("mongoose");
const UserModel = require("./models/User");

const cors = require("cors");

app.use(express.json());
app.use(cors());

const mongooseConnectionString = "mongodb+srv://tryweb:password1234@cluster5.c58gv.mongodb.net/user?retryWrites=true&w=majority";
const mongooseConnection = mongoose.connect(mongooseConnectionString, 
    {
    useNewUrlParser: true,
});

// Let us know we established connection
mongooseConnection.once("open", function() {
  console.log("MongoDB database connection established successfully");
});

app.post("/addUser", async(req, res) => {

    const user = new UserModel(req.body);

    try{
        await user.save();
        response.send(user);
    }
    catch(err){
        console.log(err);
        response.status(500).send(error);
    }
});

app.listen(3000, () => {
    console.log("Server running in port 3000...");
});