Question

我使用react-toggle-button插件在React中有一个切换按钮。

单击此按钮时，它将更新数据库中集合中的值。

问题是，除非刷新页面，否则更新不会反映在DOM中。

是否有一种方法可以获取数据以立即更新值，从而使切换实际上是在视觉上切换？

这是按钮的代码：

<ToggleButton

    value={d.showInClientMenu}

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

/>

如果我单击此按钮并刷新页面，该按钮将显示现在不同的值，但是除非立即反映出更改，否则用户不会知道更改已经发生。

Answer 1

您必须像收集API一样使用流星Publish and subscribe，如果收集是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中更新集合后更新DOM中的值

1 个答案: