如何使用 React 在 Meteor App 中加載數據？

Question

介紹：

我是 meteor 的新手，我已經閱讀了有關此問題的文檔和問題，但疑問仍然存在。 我的主要問題是我無法在客戶端加載我的 MongoDb 的數據（使用什么方法加載數據）。

例子：

我有一個具有以下文件夾結構的項目：圖像

在我的 collections (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 ，第二個是長度數組：0 ，第三個是 object {stop: ƒ, ready: ƒ, subscriptionId: "mJQHdGxka4xTCX7FZ"} （我認為它返回這個是因為我沒有使用發布（ ) 在服務器上填充數據庫)

我應該使用什么方法來獲取這些數據？

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);

我已經朝着我假設您希望將其更改為 go 的方向進一步修改了代碼。 核心變化是它使用this.props.users 。 這是可以找到 React 組件中的屬性的地方，它們是 withTracker 返回的withTracker的位置。

這一切都假定您仍在使用自動發布（正如autopublish在新項目中所做的那樣，直到您將其刪除）。 如果您已經刪除了 package，那么您需要添加

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

在您的服務器代碼中。