Question

例如，如果我有一个User模式，并且我想为已经存储在mlab中的每个用户呈现属性“name”的动态列表，我将如何进行此操作？如果你能指出一个很好的教程。

Answer 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（component）

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上的数据渲染到React组件上？

1 个答案: