javascript - 为什么我无法在 React 组件中访问我的 Mongo 集合？

Question

使用 reactjs:react 作为官方 React 包尚未在 Windows 上正确安装。

只是想掌握 React，却因为一些看似小事而感到非常沮丧。由于某种原因，我实际上无法通过我的 React 组件查询任何 Mongo 集合 - Chrome 控制台中的基本 Mongo 查询按预期工作......

var ExampleComponent = ReactMeteor.createClass({
  getInitialState: function() {
    return {data: []};
  },
  //didn't think the following was necessary, but tried it to no avail:
  startMeteorSubscriptions: function() {
    Meteor.subscribe('exampleCollection');
  },
  componentDidMount: function() {
    var collection = ExampleCollection.find().fetch();
    console.log(collection); //Empty Array []
    console.log(ExampleCollection); //Mongo Collection
    console.log(ExampleCollection.find()); //Cursor
    console.log(ExampleCollection.find().fetch()); //[]?? wtf? 

    this.setState({data: collection});
  },
  render: function() {
    return (
      <div data={this.state.data}>
        Hello World?
      </div>
    );
  }
});

Meteor.startup(function() {
  React.render(<ExampleComponent />, document.getElementById('root'));
})

那么这是怎么回事？任何帮助将不胜感激，我没有找到我希望的那么多关于使用 React 和 Meteor 进行基础知识的资源。

Answer 1

在reactjs:react中，需要实现一个方法:getMeteorState()这就是在调用 render() 时将数据设置为在组件中可用的原因。如果您要对数据进行发布/订阅(您做得正确)，您仍然应该实现 startMeteorSubscriptions。

例如:

var ExampleComponent = ReactMeteor.createClass({
  // Methods specific to ReactMeteor
  startMeteorSubscriptions: function() {
    Meteor.subscribe('exampleCollection');
  },
  getMeteorState: function() {
    return {
      data: ExampleCollection.find().fetch()
    };
  },

  // React Methods
  getInitialState: function() {
    return {};
  },
  render: function() {
    var data = this.state.data;

    return (
      <div>
        {/* Present your data here */}
      </div>
    );
  }
});