Как загрузить данные в приложение Meteor с помощью React? - PullRequest
Новая
       7

Как загрузить данные в приложение Meteor с помощью React?

1 голос
/ 22 октября 2019

Введение:

Я новичок в метеоре, я прочитал документацию и вопросы по этой проблеме здесь, но сомнения все еще сохраняются. Моя главная проблема - , что я не могу загрузить данные моего 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));

}

В папке пользовательского интерфейса (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 , третий объект {stop: ƒ, ready: ƒ, subscriptionId: "mJQHdGxka4xTCX7FZ"} (Iдумаю, это возвращает это, потому что я не использую publish () на сервере для заполнения базы данных)

Какой метод я должен использовать для получения этих данных?

1 Ответ

1 голос
/ 23 октября 2019

Измените 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.publish('people', () => { 
  return People.find();
});

в коде вашего сервера.

...