Node.js MERN堆栈：使用Express/React将数据发布到数据库

我是MERN堆栈和后端编程的新手。我有一个React表单，我想使用Express提交到MLab数据库。我无法成功将表单数据发布到数据库。我不确定我是否采取了正确的方法。我的表单正在工作，我能够记录字段，我在尝试提交表单数据的POST请求时遇到问题

这是我的表格：

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input } from 'reactstrap';

class AddBookModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      bookTitle: '',
      author: '',
      genre: ''
    };

    this.toggle = this.toggle.bind(this);
    this.onSubmit = this.handleSubmit.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const data = this.state;
    //console.log("Data from form :" + data.bookTitle, data.author, data.genre);
  }

  handleInputChange = (event) => {
    event.preventDefault();

    this.setState({
      [event.target.name]:
      event.target.value
    });
  }

  render() {
    const {bookTitle} = this.state;
    const {author} = this.state;
    const {genre} = this.state;
    return (
      <div>
        <Button id="add-book-button" onClick={this.toggle}>Add Book</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Add Book</ModalHeader>
          <ModalBody>
            <Form method="POST" action="/profile" id="add-book-form" onSubmit={this.handleSubmit} >
              <FormGroup>
                <Label for="book-title-label">Book Title</Label>
                <Input
                  value={bookTitle}
                  name="bookTitle"
                  onChange={this.handleInputChange}
                  placeholder="Enter name of book" />
              </FormGroup>
              <FormGroup>
                <Label for="book-author-label">Author</Label>
                <Input
                  value={author}
                  name="author"
                  onChange={this.handleInputChange}
                  placeholder="Enter author of book" />
              </FormGroup>
              <FormGroup>
                <Label for="exampleSelect">Genre</Label>
                <Input
                  onChange={this.handleInputChange}
                  value={genre}
                  type="select"
                  name="genre"
                  id="exampleSelect">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </Input>
              </FormGroup>
              <ModalFooter>
                <Button color="primary" type="submit" onClick={this.toggle}>Submit</Button>{' '}
                <Button color="secondary" onClick={this.toggle}>Cancel</Button>
              </ModalFooter>
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default AddBookModal;

这是我的Express服务器：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const authRoutes = require('./routes/api/auth');
const passportSetup = require('./config/passport-setup');
const cookieSession = require('cookie-session');
const keys = require('./config/keys');
const passport = require('passport');
const profileRoutes = require('./routes/api/profile-routes');
const bookRoutes = require('./routes/api/book-routes');

// Hooks up routes/api/items file
const items = require('./routes/api/items');

const app = express();

// Boderparser Middleware
app.use(bodyParser.json());

// sets up session cookies
app.use(cookieSession({
  // Max age set to 1 day
  maxAge: 24 * 60 * 60 * 1000,
  // Uses cookieKey from keys file to encrypt
  keys: [keys.session.cookieKey]
}));

// initialize passport
app.use(passport.initialize());
app.use(passport.session());

// DB Config
const db = require('./config/keys').mongoURI;

// Connect to mongodb
mongoose
  .connect(db, { useNewUrlParser: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// Use Routes, sets up routes/api/items to be used
app.use('/api/items', items);

app.use('/book', bookRoutes);

// Use auth.js's routes
app.use('/auth', authRoutes);
// Use profile-routes routes for profile page
app.use('/profile', profileRoutes);

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`))

我无法发出POST请求，也不知道为什么。Express route处理一些OAuth内容，并显示登录用户的配置文件。在同一页上，我有一个表单，允许用户添加数据并提交。authCheck的逻辑是否会干扰表单数据的发布？我的快速路线中的router.post未成功地记录任何内容

---

我见过有人在React表单组件中使用Axios来执行POST请求。使用Axios处理表单POST请求更好，还是我应该在Express route中处理表单POST请求更好？

您应该使用Axios进行api调用

---

在handleSubmit函数中，您使用的是event.preventDefault，它将阻止窗体的默认行为

你设置代理了吗？是的，我就是这么做的。

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const authRoutes = require('./routes/api/auth');
const passportSetup = require('./config/passport-setup');
const cookieSession = require('cookie-session');
const keys = require('./config/keys');
const passport = require('passport');
const profileRoutes = require('./routes/api/profile-routes');
const bookRoutes = require('./routes/api/book-routes');

// Hooks up routes/api/items file
const items = require('./routes/api/items');

const app = express();

// Boderparser Middleware
app.use(bodyParser.json());

// sets up session cookies
app.use(cookieSession({
  // Max age set to 1 day
  maxAge: 24 * 60 * 60 * 1000,
  // Uses cookieKey from keys file to encrypt
  keys: [keys.session.cookieKey]
}));

// initialize passport
app.use(passport.initialize());
app.use(passport.session());

// DB Config
const db = require('./config/keys').mongoURI;

// Connect to mongodb
mongoose
  .connect(db, { useNewUrlParser: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// Use Routes, sets up routes/api/items to be used
app.use('/api/items', items);

app.use('/book', bookRoutes);

// Use auth.js's routes
app.use('/auth', authRoutes);
// Use profile-routes routes for profile page
app.use('/profile', profileRoutes);

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`))