Question

我在尝试使用mongodb数据库连接我的反应应用程序时非常困难。在之前的一个问题中，我询问过如何做的建议Connecting React with MongoDB，我收到了正确方向的推动。我一直试图在youtube MongoDB tutorial with Node and Express上关注这个优秀的教程。但是，有一些关键的差异使得提交表单信息变得非常困难。例如，以下是来自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 Form插入到mongodb？当我尝试将router.post导出为变量，例如const mongo = router.post（....`我得到非常奇怪的错误。

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

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

如何正确地将此表单数据提交给MongoDB？

0 个答案: