为什么 Collection.find() 在我的 Meteor 客户端上不起作用？答案

【问题标题】：Why is Collection.find() not working on my Meteor client?为什么 Collection.find() 在我的 Meteor 客户端上不起作用？
【发布时间】：2018-06-29 11:38:50
【问题描述】：

我确信正确地创建了我的集合、发布了数据、订阅了正确的发布，并检查了数据是否真的出现在 Mongo Shell 中。我什至 console.log()'d 正在发布的数据以确保发布工作正常。然而，以下代码行没有返回任何内容：

const maybeMeet = Meets.find({meetId: maybeId}).fetch();

这可以在下面和链接仓库中/client/imports/routes/routes.js 的第 39 行中找到。

有一次，我什至尝试创建一个新的 Meteor 方法 'meets.query'，它只会发布我需要的所有数据，（不安全地）避免发布和订阅的需要（现在在 @ 的第 59 行注释掉了987654326@)。那也没用。一般来说，客户端似乎无法从服务器接收任何数据，但从客户端到服务器似乎可以工作（我可以将东西插入到我的 Meets 集合中）。

这里是问题的根源（routes.js的一部分）：

export const routes = (
    <div id='app'>
    <Header />
    <Router history={browserHistory}>
      <Switch>
        <Route exact path="/" render={() => {
          return <Landing />
        }} />
        <Route path="/before" render={() => {
          return <Before />
        }} />
        <Route path="/meet" render={() => {
          Meteor.subscribe('allMeets');

          const maybeId = queryString.parse(location.search).m;

          console.log(typeof maybeId);
          console.log(maybeId);

          const maybeMeet = Meets.find({meetId: maybeId}).fetch(); //***RETURNS NOTHING!***

          return maybeMeet.length ? <Created meet={maybeMeet[0]} /> : <NotFound />;
        }} />
        <Route path="*" render={() => {
          return <NotFound />
        }} />
      </Switch>
    </Router>
  </div>
);

这里是我发布数据的地方（`meets.js' 的一部分）：

if (Meteor.isServer) {
  Meteor.publish('allMeets', function() {
    return Meets.find();
  });
}

如果您需要查看更多代码，请查看整个代码库：https://github.com/kpeluso/meetr

我为凌乱的代码道歉 - 这是一个新项目。

【问题讨论】：

我不需要访问您的存储库来获取您的代码。请阅读How to create a Minimal, Complete, and Verifiable example。
刚刚编辑，感谢社区指南的链接。

标签： javascript mongodb reactjs meteor

【解决方案1】：

这里的问题是订阅操作是异步的，因为它必须从服务器获取数据。

解决方案是将路由器渲染的组件包裹在WithTracker中，这样当数据可用时它会重新运行并开始渲染到DOM

有关如何执行此操作的更多信息，请参阅文档： https://guide.meteor.com/react.html#using-withTracker

【讨论】：

【解决方案2】：

WithTracker，查看流星文档https://guide.meteor.com/react.html#using-withTracker

例如在此代码中，对于 APP 组件，withTracker 使响应性与订阅保持同步，并且事物列表获取集合。

export default withTracker(() => {
  Meteor.subscribe('allThings')
  return {
    things: Things.find({}).fetch()
  }
})(App);

【讨论】：

【解决方案3】：

查看我的流星反应样板。

https://github.com/pkcwong/meteor-react-starter

我使用包meteor/react-meteor-data。 HOF withTracker 是正确的解决方案。

【讨论】：

【解决方案4】：

在我的Created 组件中，我有一个Tracker.autorun()，其中有一个错误，这导致其他一切都崩溃了。如前所述，在我的路由器中对 Meteor.subscribe(allMeets); 的调用也是异步的，并且没有被这样处理。

我发现withTracker 很麻烦，但我从它的文档中获得了很多灵感。因此，我的Created 组件中的编辑代码现在包括以下内容：

componentDidMount() {
    this.meetTracker = Tracker.autorun(() => {
      const subHandle = Meteor.subscribe('allMeets');
      const loading = !subHandle.ready();

      const maybeMeet = Meets.find({meetId: this.props.meetId}).fetch();
      if (!maybeMeet.length && loading) {
        this.setState({active: <Loading />});
      } else if (!loading) {
        if (maybeMeet.length) {
          this.setState({active: <During meet={maybeMeet[0]} />});
        } else {
          createHistory().push('/PageNotFound');
          window.location.reload();
        }
      }
    });
  }

...我的router 中的代码现在包括以下内容：

  <Route path="/meet" render={() => {
    const maybeId = queryString.parse(location.search).m;
    return <Created meetId={maybeId} />
  }} />

【讨论】：