Javascript 来自MongoDB的数据未显示

我通过创建一个简单的应用程序来学习MongoDB，该应用程序应该只显示数据库中的项目，我设法让它与我的MongoShell一起工作，但现在我想使用MongoDB群集，问题是我根本无法显示数据，我做错了什么，我如何显示数据？我的收藏名为“红茶”，在一个名为“茶”的数据库中，您可以在这里看到： 当与Postman一起尝试终结点时，我收到一个空数组，因此问题在于入口点，如何正确使用来自终结点的数据？

这是我创建的node.js服务器：

// Requiring the dependencies
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const PORT = 4000;
const itemRoutes = express.Router();


app.use(cors());
app.use(bodyParser.json());

mongoose.connect('mongodb+srv://m001-student:<mongoIdentifier>.mongodb.net/test?retryWrites=true&w=majority', { useNewUrlParser: true } )
const connection = mongoose.connection;

connection.once('open', function() {
  console.log('Connection to MongoDB established succesfully!');
})



itemRoutes.route('/').get( async (req, res) => {
  let collection = connection.collection("black_tea");

  let response = await collection.find({}).toArray();

  res.send(response);
});



app.use('/items', itemRoutes);

app.listen(PORT, function() {
  console.log('Server is running on' + ' ' + PORT);
})

//需要依赖项
const express=require（'express'）；
常量app=express（）；
const bodyParser=require（'body-parser'）；
const cors=需要（“cors”）；
const mongoose=require（'mongoose'）；
常数端口=4000；
const itemrouts=express.Router（）；
应用程序使用（cors（））；
use（bodyParser.json（））；
mongoose.connect（'mongodb+srv://m001-student:.mongodb.net/test?retryWrites=true&w=majority“，{useNewUrlParser:true}）
const connection=mongoose.connection；
connection.once（'open'，function（）{
log（'与MongoDB的连接成功建立！'）；
})
itemRoutes.route（'/'）.get（异步（请求、恢复）=>{
让收集=连接。收集（“红茶”）；
let response=wait collection.find（{}）.toArray（）；
res.send（响应）；
});
应用程序使用（'/items'，itemRoutes）；
app.listen（端口，函数（）{
log（'服务器正在'+''+端口上运行）；
})

我的前端消耗了它：

export default class Blacktea extends Component {

  constructor(props) {
      super(props);
      this.state = {
       black_tea: []
      };
  }
  blackTeaList() {
      return this.state.black_tea.map(function(blackTea, i){
          return <div className="tea-info-container"> 
                 <div className="tea-info" black_tea={blackTea} key={i}>
                     <p className="title">{blackTea.title}</p>
                     <img className="item-img" src={blackTea.picture} alt=""/>
                     <p className="description">{blackTea.description}</p>
                 </div>
                 </div>
      })

  }

  componentDidMount() {

      axios.get('http://localhost:4000/items')
           .then(response => {
               this.setState({black_tea: response.data})
           })
           .catch(function(error) {
               console.log(error)
           })
  }

  render() {
      return (
        <div>
          { this.blackTeaList() } 
       </div>
      )
  }
}

导出默认类Blacktea扩展组件{
建造师（道具）{
超级（道具）；
此.state={
红茶：[]
};
}
黑名单（）{
返回此.state.black_tea.map（函数（blackTea，i）{
回来
{blackTea.title}
{blackTea.description}
})
}
componentDidMount（）{
axios.get（）http://localhost:4000/items')
。然后（响应=>{
this.setState（{black_tea:response.data}）
})
.catch（函数（错误）{
console.log（错误）
})
}
render（）{
返回(
{this.blackTeaList（）}
)
}
}

您连接到了错误的数据库。您正在连接到

test

，而不是

tea

：

mongoose.connect（'mongodb+srv://m001-student:BaBaBa10@m001 xposu.mongodb.net/test？retryWrites=true&w=maist'，{useNewUrlParser:true}）

应该是

mongoose.connect（'mongodb+srv://m001-student:BaBaBa10@m001 xposu.mongodb.net/tea？retryWrites=true&w=maist'，{useNewUrlParser:true}）

---

更重要的是，请保护您的mongo端点

您是否尝试调用

/items

端点，并确保其具有有效响应？调用API后，前端代码中的

响应

中有什么内容？我现在使用Postman看到数组数据为空，这就是前端的问题所在它只是一个空数组您使用的db名称正确吗？您似乎正在连接到

test

而不是

tea