如何将存储在 mlab 上的数据渲染到 React 组件上？答案

【问题标题】：How do you render data stored on mlab onto a React component?如何将存储在 mlab 上的数据渲染到 React 组件上？
【发布时间】：2026-02-27 06:30:01
【问题描述】：

例如，如果我有一个用户模式，并且我想为已存储在 mlab 中的每个用户呈现属性“名称”的动态列表，我将如何去做？如果你能给我指一个教程，那也很棒。

【问题讨论】：

请告诉我们你到目前为止做了什么。

标签： reactjs react-router mlab

【解决方案1】：

您需要使用mongodb driver 或mongoose。我建议使用mongoose 因为它可以更轻松地连接到您的 mongo 数据库。

在您的 mlab 帐户上创建数据库后，只需复制 Mongodb URI 并将其格式化如下：

mongodb://<dbuser>:<dbpassword>@dsXXXXX.mlab.com:XXXXX/test-app // XXXXX is the port number given to you by mlab

根据Mongoose Official Documentations：

// App.js（组件）

var mongoose = require('mongoose');
    mongoose.connect('your-mlab-mongodb-uri'); // insert your mlab `MongoDb URI`

var Cat = mongoose.model('Cat', { name: String });

class App extends React.Component {
    constructor() {
      super();
      this.state = { cats: [] };
    }

    componentDidMount() {
      Cat.find({}).then(function(result) {
          this.setState({ cats: result });
      });
    }

    render() {
      const { cats } = this.state;
      if (cats && cats.length > 0) {
          return (
           <div>
             {
               cats.map((cat, index) =>(
                   <p key={index}>{cat.name}</p>
               ))
             }
           </div>
          );
       }

      return <h1>Loading data..</h1>
  }
}

我建议使用Redux - 有很多关于此的教程 - 来处理与您的数据库之间的数据。在上面的例子中，为了举个简单的例子，我直接从组件中获取数据。

希望这会有所帮助！ :)

【讨论】：

嗨，这是我已经知道该怎么做的部分，我的信息已经保存在 mlab 上。我实际上需要看看如何从 mLab + 渲染部分获取。