从第一个 withTracker 查询中获取 ID 并传递给第二个 withTracker 查询？（流星/反应）答案

【问题标题】：Get ID from 1st withTracker query and pass to a 2nd withTracker query? (Meteor / React)从第一个 withTracker 查询中获取 ID 并传递给第二个 withTracker 查询？（流星/反应）
【发布时间】：2017-12-01 08:09:18
【问题描述】：

我正在使用 React 和 Meteor。我使用 withTracker 将数据传递给我的 Event React 组件，它从 URL 获取和 ID：

export default withTracker(props => {
  let eventsSub = Meteor.subscribe('events');
  return {
    event: Events.find({ _id: props.match.params.event }).fetch(),
  };
})(Event);

这是可行的，但我现在需要从另一个名为 Groups 的集合中获取数据。困难的是我需要从我已经返回的事件中获取一个 ID。

下面的代码在我硬编码 1 时有效。但是 1 实际上是动态的，需要来自事件查询的字段返回。

export default withTracker(props => {
  let eventsSub = Meteor.subscribe('events');
  let groupsSub = Meteor.subscribe('groups');
  return {
    event: Events.find({ _id: props.match.params.event }).fetch(),
    group: Groups.find({ id: 1 }).fetch(),
  };
})(Event);

【问题讨论】：

event 是否包含密钥“id”？

标签： reactjs meteor

【解决方案1】：

@Yasser 的答案看起来应该可以工作，尽管当 event 未定义时（例如，当事件订阅仍在加载时）它会出错。

如果您知道要查找单个文档，则可以使用 .findone() 而不是 .find().fetch()。此外，当您通过_id 搜索时，您可以直接将其用作第一个参数。您还应该向withTracker() 提供任何订阅的loading 状态：

export default withTracker(props => {
  const eventsSub = Meteor.subscribe('events');
  const groupsSub = Meteor.subscribe('groups');
  const loading = !(eventsSub.ready() && groupsSub.ready());
  const event =  Events.findOne(props.match.params.event);
  const group = event ? Groups.findOne(event.id) : undefined;
  return {
    loading,
    event,
    group,
  };
})(Event);

性能观点还有另一个问题。您的两个订阅没有任何参数；他们可能会返回比您真正需要的更多的文档，从而导致这些订阅加载速度变慢。我会将event 参数传递给一个发布，然后该发布将返回一个包含事件和组的数组。

export default withTracker(props => {
  const oneEventSub = Meteor.subscribe('oneEventAndMatchingGroup',props.match.params.event);
  const loading = !oneEventSub.ready();
  const event =  Events.findOne(props.match.params.event);
  const group = event ? Groups.findOne(event.id) : undefined;
  return {
    loading,
    event,
    group,
  };
})(Event);

服务器上的oneEventAndMatchingGroup 发布：

Meteor.publish(`oneEventAndMatchingGroup`,function(id){
  check(id,String);
  const e = Events.findOne(id);
  return [ Events.find(id), Groups.find(e.id) ];
});

请注意，发布必须返回游标或 游标数组，因此在此处使用 .find()。

【讨论】：

【解决方案2】：

目前还不清楚event 对象的哪个字段应该提供给Groups.find。但我会尝试回答这个问题。

尝试使用类似的东西 -

export default withTracker(props => {
  let eventsSub = Meteor.subscribe('events');
  let groupsSub = Meteor.subscribe('groups');
  event =  Events.find({ _id: props.match.params.event }).fetch();
  return {
    event,
    group: Groups.find({ id: event['id'] }).fetch(),
  };
})(Event);

注意这一行 -

group: Groups.find({ id: event['id'] }).fetch(),

可以修改以使用您需要的任何字段。

group: Groups.find({ id: event['whichever field'] }).fetch(),

【讨论】：