Question

我正在尝试使用Meteor 1.3，React和React-Router获得一个非常基本的应用程序。页面正在呈现，但是在获取数据时遇到问题。我已经完成了一些研究，但是对于这种特殊的混合物无法找到很多，包括使用容器模式。

应用程序需要做的就是在“测试”页面上显示“Thingies”集合中的所有项目。不确定它是数据发布，路由，容器还是其他不正确的东西？

即使mongo shell明确显示那里的项目，调试控制台行也会在集合中显示为0。

我的项目结构：http://i.stack.imgur.com/WZXFa.png

things.js

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { check } from 'meteor/check';

export const Thingies = new Mongo.Collection('thingies');

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('thingies', function thingiesPublication() {
    return Thingies.find();
  });
}

Test.jsx

import { Meteor } from 'meteor/meteor';
import { Thingies } from '../../api/things.js';
import { createContainer } from 'meteor/react-meteor-data';
import React, { Component } from 'react';

class TestContainer extends Component {
  render(){

    console.log('Props: ' + this.props.thingies.length);

    let RenderThings = this.props.thingies.map(thing => {
      return <li key={thing._id}>{thing.text}</li>
    });

    return (
      <div>
        <h1>Test this</h1>
        <ul>
          { RenderThings }
        </ul>
      </div>
    );
  }
}

TestContainer.propType = {
  thingies: React.PropTypes.array
};

export default createContainer(() => {
  Meteor.subscribe('thingies');

  console.log('Container: ' + Thingies.find({}).count());

  return {
    thingies: Thingies.find({}).fetch(),
  };
}, TestContainer);

routes.jsx

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

// route components
import App from '../../ui/layouts/App.jsx';
import TestContainer from '../../ui/pages/Test.jsx';
import Index from '../../ui/pages/Index.jsx';

export const renderRoutes = () => (
  <Router history={browserHistory}>
    <Route path="/" component={ App }>
      <IndexRoute component={ Index } />
      <Route path="index" component={Index}/>
      <Route path="test" component={TestContainer}/>
    </Route>
  </Router>
);

Navigation.jsx

import React from 'react';
import { IndexLink, Link } from 'react-router';

export const Navigation = () => (
<div>
<h4>Navigation</h4>
  <ul>
    <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
    <li><Link to="index" activeClassName="active">Index</Link></li>
    <li><Link to="test" activeClassName="active">Test</Link></li>
  </ul>
  </div>
)

App.jsx

import React, { Component }  from 'react';
import { Navigation } from '../components/Navigation.jsx';

const App = ( { children } ) => (
  <div>
    <Navigation />
    { children }
  </div>
)

export default App;

非常感谢提前。我确定我错过了一些明显的东西！

Answer 1

我会尝试更改一下Test.jsx Container代码：

export default createContainer(() => {

  if (Meteor.subscribe('thingies').ready()) {

    console.log('Container: ' + Thingies.find({}).count());

    return {
      thingies: Thingies.find({}).fetch()
    };
  } else {
    return {
      thingies: null
    };
  }
}, TestContainer);

编辑：尝试将您的发布方法替换为：

if (Meteor.isServer) {
  // This code only runs on the server
  Meteor.publish('thingies', function() {
    return Thingies.find({});
  });
}

Meteor 1.3，React，React Router - 数据未通过

1 个答案: