获取 MongoDB + Express + NodeJS + React

Question

我正在尝试一个MERN项目，对这个环境还很新，我想从MongoDB->NodeJS->Express->React获取数据。所以，这是我在一个NodeJs项目中的server.js文件：

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const url = 'mongodb://127.0.0.1:27017/'
var router = express.Router();

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

const MongoClient = require('mongodb').MongoClient
var db
MongoClient.connect(url, (err, client) => {
  if (err){
    return console.log(err);
  }else{
    console.log('Connection established to', url);
  db = client.db('database-test') 
  app.listen(3100, () => {
    console.log('listening on 3100')
  })}
});

app.get('/quotes', (req, res) => {
  db.collection('quotes').find({_name :'Henry'}).next(function(err, doc)
{
  if(err)
  console.log(err);
  res.json(doc);
})
});

使用GET方法从MongoDB的名为quotes的集合中获取数据：

MongoDB查询

db.quotes.find()

{ "_id" : ObjectId("5aa94f93bd03af418d4d0acf"), "name" : "Henry" }

现在我想在ReactJS项目中展示我的数据，所以我使用了一个代理将调用重定向到nodeJS项目。

ReactJS项目，文件package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "0.9.5"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3100"
}

在App.js文件中，我希望展示我的数据。

ReactJS项目，App.js文件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const URL = 'http://localhost:3100'

class App extends Component {

  state = {
    quotes: []
  }

  componentDidMount() {
    fetch('/quotes')
      .then(res => res.json())
      .then(quotes => this.setState({ quotes }));
  }

  render() {
    return (
         <div className="App">
           <header className="App-header">
             <img src={logo} className="App-logo" alt="logo" />
             <h1 className="App-title">Welcome to React</h1>
           </header>
           <p className="App-intro">{this.name.response}</p>
         </div>
       );
  }
}

export default App;

我想知道正确的方法是什么， 如何在server.js文件中查询我的数据库，以及如何从App.js文件调用它以显示我的数据。显然，我代码中的内容不起作用。 谢谢。

- Bkfsec

---

到底是什么出了问题？ - Fabian Schultz

获取看起来没问题，你能否检查一下控制台是否有任何错误？并在获取请求中执行 console.log(quotes) 以查看传入的数据是什么？ - Fabian Schultz

@FabianSchultz 对于您来说，我在React中正确地调用了响应吗？这个：<p className="App-intro">{this.name.response}</p> - Bkfsec

请检查浏览器的控制台。你可能想要像这样写：{this.state.quotes[0] ? this.state.quotes[0].name : null} - Fabian Schultz

浏览器控制台返回以下错误：Uncaught TypeError: Cannot read property 'response' of undefined at App.render (App.js:24) ......我的查询方式是正确的，因为现在我在日志中看到了我的JSON '{_id：5aa94f93bd03af418d4d0acf，name：'Henry'，quote：'quote'}'。 - Bkfsec

Answer 1

我认为问题在于你在 App.js 文件的顶部将 URL 保存为变量，但在 fetch 函数中从未调用它。

- terraforme