javascript - 如何使用 React 在 Meteor App 中加载数据？

Question

简介:

我是 meteor 的新手，我已经阅读了有关此问题的文档和问题，但疑问仍然存在。 我的主要问题是我无法在客户端加载我的 MongoDb 数据(使用什么方法加载数据)。

示例:

我有一个具有以下文件夹结构的项目: image

在我的收藏 (People.js) 中，我有这个:

import { Mongo } from 'meteor/mongo';

export const People = new Mongo.Collection('people');

在服务器文件夹 ( main.js ) 中。 PS:我无法更改此文件。

import { People } from '../collections/people';

Meteor.startup(() => {

const TEST_DATA = [
  {
    something: 'This is a simple example',
  }, ... ]

TEST_DATA.forEach(test => People.insert(test));

}

在 UI 文件夹中 (app.jsx)

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import {People} from '../collections/people';

export class App extends Component {
  render() {
    return (
      <div>
        <h3>Teste </h3>
        { console.log(this.users) }
        { console.log(People.find({}).fetch()) }
        { console.log(Meteor.subscribe('people')) }
      </div>
    );
  }
}

export default withTracker(() => {
  return {
    users: People.find({}).fetch(),
  };
})(App);

客户端文件夹(main.jsx):

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '../ui/App';

Meteor.startup(() => {
  render(<App />, document.getElementById('app'));
});

调试:

我检查了数据库，发现它已填充。第一个 console.log 显示 undefined ，第二个 length:0 数组，第三个对象 {stop: ƒ, ready: ƒ, subscriptionId: "mJQHdGxka4xTCX7FZ"}(我认为它返回这个是因为我没有在服务器上使用 publish () 来填充数据库)

我应该使用什么方法来获取这些数据？

Answer 1

将 app.jsx 更改为

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import { Meteor } from 'meteor/meteor';
import {People} from '../collections/people';

export class App extends Component {
  render() {
    console.log(this.props.users)
    return (
      <div>
        <h3>Teste </h3>
        { this.props.users.map((user) => { return (<div>user.something</div>) }) }
      </div>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('people');
  return {
    users: People.find({}).fetch(),
  };
})(App);

我已经按照我假设您希望它进行的方向进一步修改了代码。核心变化是它使用 this.props.users。这就是可以找到 React 组件中的属性的地方，以及它们由 withTracker 返回的函数放置的位置。

这一切都假设您仍在使用 autopublish(就像 meteor 在新项目中所做的那样，直到您将其删除)。如果你已经删除了那个包，那么你需要添加

Meteor.publish('people', () => { 
  return People.find();
});

在您的服务器代码中。