IT技术 - 需要的建议：如何正确地将 React 连接到 MongoDB - 吾爱随笔录

我一直在花一些时间学习 React、MongoDB 和其他与 JS Web 应用程序相关的工具。对于我创建的一个小项目，我使用这个存储库来创建我的玩具应用程序Create React App，没有 build。随着我在我的应用程序中的进步，事后我学到了很多与 React 相关的工具和材料。

我坚持的部分是我试图将联系表格的数据提交到 MongoDB，但到目前为止我没有成功地将我的应用程序与 MongoDB 连接起来。

这是我的 MongoDB 代码。我从MongoDB的导游几乎复制和粘贴代码到我的web应用程序到一个src/modules/mongo.js文件

const MongoClient = require('mongodb').MongoClient;
const assert = require('assert');
const ObjectId = require('mongodb').ObjectID;
const url = 'mongodb://localhost:27017/danielrubio';

const insertFormData(db, callback) {
   db.collection('contactsubmissions').insertOne( {
      "name": name,
      "message": message,
      "email": email
    }, function(err, result) {
    assert.equal(err, null);
    console.log("Inserted a document into the restaurants collection.");
    callback();
  });
};

MongoClient.connect(url, function(err, db) {
  assert.equal(null, err);
  insertDocument(db, function() {
    db.close();
  });
})

上面的代码很简单，它基本上是将一个文档插入到一个集合中。

这是我的第二个文件 src/modules/contact.js

import React, { Component } from 'react';
import Formsy from 'formsy-react';
import { FormsyText } from 'formsy-material-ui/lib';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import Snackbar from 'material-ui/Snackbar';
import '../assets/css/style.css';

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

  handleSubmit(data) {
    db.insertDocument({
       form submission info
       db.close()
    })
  }

  ......more code.....

  }

到目前为止，我已经能够完成 MongoDB 指南，我已经创建了我的数据库，可以访问控制台，并且可以通过控制台插入数据。我还没有弄清楚如何将我的应用程序连接到 mongodb，因此当我单击提交按钮时，它会将文档插入到正确的数据库中。来自 Rails 并使用一点 Flask，我通常可以调用.create连接到我的数据库的方法或执行某种打开和关闭数据库的 SQL Alchemy 操作。我通过尝试将两个文件组合在一起来尝试这种方法，但是当我这样做时，我什至无法运行，npm start否则我会收到以下类型的错误：

Error in ./~/mongodb/lib/gridfs/grid_store.js
Module not found: Error: Cannot resolve module 'fs' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb/lib/gridfs
 @ ./~/mongodb/lib/gridfs/grid_store.js 42:7-20

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'net' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 5:10-24

Error in ./~/mongodb-core/lib/connection/connection.js
Module not found: Error: Cannot resolve module 'tls' in /Users/drubio/Desktop/react_personal_website/node_modules/mongodb-core/lib/connection
 @ ./~/mongodb-core/lib/connection/connection.js 6:10-24

所以我的问题是如何简单地连接我的应用程序以打开 mongodb 数据库并写入它？我已经阅读了很多教程，但后来我陷入了困境，并且对进一步谈论Express、Mongoose、Flux等等感到困惑。从高级概述来看，似乎我什至不需要 Express 或 Mongoose，我只是想在没有模式的情况下插入我的数据，老实说，我并没有真正了解 Flux 是什么，但从我收集的内容来看，我不知道我的小应用程序并不真正需要它（我认为）。我可以在这个正确的方向上稍微轻推一下。谢谢。

  [1]: https://github.com/facebookincubator/create-react-app