Обновить значение в DOM после обновления коллекции в Meteor - PullRequest
Новая
       9

Обновить значение в DOM после обновления коллекции в Meteor

0 голосов
/ 25 октября 2018

У меня есть кнопка переключения в React с использованием плагина реагировать-переключателя .

Когда вы нажимаете эту кнопку, она обновляет значение в коллекции в БД.

Дело в том, что обновление не отражается в DOM, если вы не обновите страницу.

Есть ли способ получить эти данные, чтобы мгновенно обновить значение, чтобы переключение фактически визуально переключалось?

Вот код для кнопки: 

<ToggleButton

    value={d.showInClientMenu}

    onToggle={value => {
        Reports.update(
            { _id: d._id },
            { $set: { showInClientMenu: !value } }
            );
        value = !value
    }}

/>

Если я нажму на эту кнопку и обновлю страницу, кнопка отобразит значение, которое теперь отличается, но пользователи не будутзнать, что изменение произошло, если оно не отражено немедленно.

1 Ответ

0 голосов
/ 25 октября 2018

Вы должны попробовать с Meteor Publish and subscribe, как в API коллекции, если коллекция lists, тогда 

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';

export const Lists = new Mongo.Collection('lists');

if (Meteor.isServer) {
  Meteor.publish('lists', function () {
    return Lists.find({ userId: this.userId });
  });
}

и в imports/ui/ListsItem.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { Links } from '../api/lists';

export default class ListsItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lists: []
    };
  }
  componentDidMount() {
    this.listsTracker = Tracker.autorun(() => {
      Meteor.subscribe('lists'); // Auto publish when loggedin
      const lists = Lists.find({}).fetch();
      this.setState({ lists });
    });
  }
  componentWillUnmount() {
    this.linksTracker.stop(); // Stop publish when logged out
  }

  render() {
    return (
      <div>
        <p>Lists</p>
        <div>
          // Here is the view code and toggle
        </div>
      </div>
    );
  }
};

Это был просто пример того, как на самом деле работает Publish and subscribe.

После такой реализации данные автоматически отображаются после создания или немедленного изменения.

Также прочитайте это

Я думаю, что это поможет.

...