Обновить значение в DOM после обновления коллекции в Meteor
У меня есть кнопка переключения в React с помощью плагина кнопка переключения.
Когда вы нажимаете на эту кнопку, оно обновляет значение в коллекции в БД.
Дело в том, что обновление не отражается в DOM, пока вы не обновите страницу.
Есть ли способ получить эти данные для мгновенного обновления значения, чтобы переключатель действительно визуально переключался?
Вот код кнопки:
<ToggleButton
value = {d.showInClientMenu}
onToggle = {value => {
Reports.update(
{ _id: d._id },
{ $set: { showInClientMenu: !value } }
);
value = !value
}}
/>
Если я нажму на эту кнопку и обновлю страницу, кнопка отобразит значение, которое теперь отличается, но пользователи не узнают, что изменение произошло, если оно не отразится немедленно.
Ответы 1
Вы должны попробовать с 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.
После такой реализации данные автоматически отображаются сразу после создания или изменения.
Также прочтите это
Думаю поможет.
Вы хотите сказать «Списки» вместо «Ссылки» в функции Meteor.isServer?
@LukeVenter Да! именно это как Lists
Если вам нужны реактивные (мгновенные) обновления, вам лучше всего оформить публикацию / подписку на эту коллекцию. guide.meteor.com/data-loading.html