使用 React 在 Meteor.subscribe 上不更改客户端上的集合答案

【问题标题】：Collection on client not changing on Meteor.subscribe with React使用 React 在 Meteor.subscribe 上不更改客户端上的集合
【发布时间】：2016-12-16 07:34:35
【问题描述】：

我正在使用 Meteor 和 React JS。我通过这段代码得到了“列表”的集合，

Meteor.subscribe('getList', {status:'active'},function(){
    self.setState({lists:Lists.find().fetch()});
});

这是发布的代码，

Meteor.publish('getList', function(data){
    data.user = this.userId;
    return Lists.find(data);
});

所以它正在工作。问题是我有两个组件调用 Meteor.subscribe('getList')。但是状态就不一样了。

所以在其他组件中，我有这段代码，

Meteor.subscribe('getList', {status:'archived'},function(){
    self.setState({lists:Lists.find().fetch()});
});

所以这里发生的情况是，如果用户转到 FirstComponent，this.state.lists 是空的（这是正确的）。然后当用户导航到 SecondComponent 时，this.state.lists 会填充数据（这是正确的）。但是当用户返回 FirstComponent 时，this.state.lists 仍然填充了数据（这是错误的）。

就像客户端中的第一个集合（为空）仍然存在。然后添加第二个集合（非空）。我想在重新订阅之前清除客户端中的集合。

顺便说一下，我使用的是流量路由器。

【问题讨论】：

你在使用 createContainer 吗？
我正在使用 Flowrouter。
我不使用 createContainer
请使用创建容器。 guide.meteor.com/react.html#using-createContainer
为什么需要使用createContainer？

标签： javascript reactjs meteor

【解决方案1】：

由于订阅是累积的，您应该在 setState 函数中重复查询条件：

let query = {status:'active'};
Meteor.subscribe('getList',query,function(){
    self.setState({lists:Lists.find(query).fetch()});
});

query = {status:'archived'};
Meteor.subscribe('getList',query,function(){
    self.setState({lists:Lists.find(query).fetch()});
});

但是请注意，从安全角度来看，您确实不想将来自（不受信任的）客户端的查询对象作为参数传递给订阅！从控制台有人可以这样做：

Meteor.subscribe('getList',{});

【讨论】：

【解决方案2】：

看起来您正在 Meteor.subscribe onReady 回调中设置 React 状态。每个组件都有自己的状态吗？

您从哪里调用 Meteor.subscribe？请记住，Meteor 将订阅数据放在本地 mini-mongo 中，当您调用 Lists.find() 时，您正在从那里读取数据。

按照您的设置方式，数据不会是被动的。您需要将句柄存储到 Meteor.subscribe 游标并使用它来管理订阅生命周期。

如果你能分享更多代码，我可以给出更简洁的答案。

【讨论】：