javascript - 如何仅在准备好时才从react-meteor-data容器获取数据？

Question

由于 isReady 保持 false，因此我无法从容器中获取数据。当查看 MeteorToys 时，集合确实被加载，所以我不明白为什么。

在服务器上，我定义了 StaticContents 集合，该集合加载了“api”数据。 (现在是我自己输入的)

export const StaticContents = new Mongo.Collection("staticContents");

if (Meteor.isServer) {
  Meteor.publish("polled-publication", function() {
    const publishedKeys = {};
    const poll = () => {
      // Let's assume the data comes back as an array of JSON documents, with an _id field, for simplicity
      const data = [{ _id: 1, name: "jef" }, { _id: 2, name: "jan" }];
      const COLLECTION_NAME = "staticContents";
      data.forEach(doc => {
        if (publishedKeys[doc._id]) {
          this.changed(COLLECTION_NAME, doc._id, doc);
        } else {
          publishedKeys[doc._id] = true;
          this.added(COLLECTION_NAME, doc._id, doc);
        }
      });
    };
    poll();
    this.ready();
  });
}

在客户端上，我导入这个 StaticContents 集合和 React-meteor-data 并将其放入一个容器中，该容器将这些变量传递给我的 React 组件。

import { Meteor } from "meteor/meteor";
import { Mongo } from "meteor/mongo";
import { StaticContents } from "../api/gap.js";
import { createContainer } from "meteor/react-meteor-data";
import React, { Component } from "react";

class Dashboard extends Component {
  componentWillMount() {
    console.log("log the props");
    console.log(this.props);
  }
  render() {
    //const gapData = Session.get("gapData");
    return (
      <div className="container">
        <div className="starter-template">
          <h1>This is the dashboard page.</h1>
          <p className="lead">
            Use this document as a way to quickly start any new project.<br />{" "}
            All you get is this text and a mostly barebones HTML document.
          </p>
          <p>
            {this.props.testprop}
            <br />
            {this.props.isReady && this.props.content.name}
            <br />
          </p>
        </div>
      </div>
    );
  }
}

export default createContainer(props => {
  // Do all your reactive data access in this method.
  // Note that this subscription will get cleaned up when your component is unmounted
  const handle = Meteor.subscribe("polled-publication");

  return {
    isReady: handle.ready(),
    content: StaticContents.find({}).fetch(),
    testprop: "this is a testprop"
  };
}, Dashboard);

记录时 props isReady 为 false 并且内容为空数组。我应该如何解决这个问题以及为什么加载时间这么长？

我使用官方 meteor 指南“从静止加载”作为指南。 https://guide.meteor.com/data-loading.html#loading-from-rest

Answer 1

由于您在 componentWillMount 中记录 this.props，因此它将在 安装之前执行一次，并且可能在轮询发布订阅已准备就绪。在此期间，您将获得 isReady 和 contents。随后，订阅应该准备就绪， Prop 将成为您所期望的。

您可以将 console.log 放入 render 中，以检查每个渲染上的 props 值。

也在

{this.props.isReady && this.props.content.name}

this.props.content 是一个数组，因此引用 name 字段没有多大意义。