IT技术 - 如何正确将此表单数据提交到 MongoDB？ - 吾爱随笔录

我很难尝试将我的react应用程序与 mongodb 数据库连接起来。在上一个问题中，我询问了如何使用 MongoDB 连接 React的建议，我收到了朝着正确方向的推动。我一直在尝试使用 Node 和 Express跟随这个关于 youtube MongoDB 教程的优秀教程。但是，有一些关键的差异使得提交表单信息变得非常困难。例如，以下是 youtube 视频中的一段代码：

index.html

<form action='/insert' method='post>
   <div> Input field one</div>
   <div> Input field two </div>
   ..........code.......
   <button type="submit">Insert</button>
</form>

然后在他的routes/index.js他有这个代码：

var express = require('express');
var router = express.Router();
var mongo = require('mongodb').MongoClient
var assert = require('assert')
var mongoUrl = 'mongodb::localhost...........'

router.post('/insert', function(req, res, next) {
  let formInput = {
     *form input hash with datan*
   }

   mongo.connect(url, function(err, db) {
    ........code to insert data into mongo......
   }
}

如果需要，我可以在上面的示例中更深入地了解确切的代码，但我认为它非常简单。本质上，这个人正在使用 express 连接到数据库，并从他的表单中捕获数据，然后将其插入到他的数据库中。

这是我的问题，youtube 视频没有使用 React，而且它没有使用我正在使用的Create-React-App第二，youtube 视频中的表单使用的是表单 html 元素，我的联系表单是完全制作的使用 React 和一个名为 Formsy 和 Formsy 材质 ui 的工具。指向 Formsy 属性的链接显示没有action或method属性Formsy handlers。所以下面是我的代码片段：

src/modules/mongo.js

const express = require('express');
const router = express.Router();
const mongodb = require('mongodb').MongoClient;
const assert = require('assert');
const mongoUrl = 'mongodb://localhost.......';

router.post('/insert', function(req, res, next) {
  let contactMessage = {
    name: req.body.name,
    email: req.body.email,
    message: req.body.message
  };

  mongodb.connect(url, function(err, db) {
    assert.equal(null, err);
    db.collection('message_submissions').insertOne(contactMessage, function(err, result) {
      assert.equal(null, err);
      console.log('message inserted');
      db.close();
  });
}

联系表格src/modules/contact.js

class ContactForm extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { open: false };
  }

  handleSubmit(data) {
    console.log(data)

    ================PROBLEM==============
    How am I supposed to insert data to mongo db here?
    =====================================
  }

  ...........code.......

  render() {
    return(
      <div>
        <Paper className="Form" zDepth={2}>
          <Formsy.Form onSubmit={this.handleSubmit} action='/insert' method='post'
            <FormsyText
               required
               name="name"
               floatingLabelText="Enter your name"
            />

            .......more input.....
            .......more input.....

          </Formsy.Form>
        </Paper>
      </div>
    );
  }

我该如何让我的 Formsy 表单插入到 mongodb？当我尝试将 myrouter.post作为变量导出时，例如const mongo =router.post(....`，我得到了非常奇怪的错误。

让事情变得更糟的是没有单一方法解决这个问题的教程的数量。例如，这里是我用来解决客户端/服务器问题的教程列表。这些都不相同，其中一些涉及从 API 获取数据，这不是我想要的。

我真的希望有一种像 Flask 那样使用 React 连接到数据库的简单方法。这部分我一直在努力。我的方法是否存在某种明显的问题。更好的是，如果有人可以将我指向一个存储库，该存储库会突出显示一个非常有用的明确示例。