node.js - 获取 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 从名为 quotes 的 MongoBD 集合中获取我的数据:

MongoDB query

db.quotes.find()

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

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

ReactJS project, file 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 project, App.js file

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 文件中调用它来显示我的数据。显然，我的代码中的内容不起作用。谢谢。

Answer 1

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