Question

使用reactjs: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()时将数据设置为在组件中可用的原因。如果您正在使用您的数据（正确地执行了您的数据）对pub / sub执行，您仍然应该实现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>
    );
  }
});

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

1 个答案: