Question

我正在尝试动态地从mongo数据库中检索数据，就像有人向数据库插入内容时，它会在客户端自动更新它。首先，我在客户端文件夹中的main.js上使用了Tracker.autorun，它可以工作。我在运行＆＃34; ReactDOM.render＆＃34;时将支持传递给根组件。它呈现。但是，当我添加路线时，我不再传递一个组件，而是传递整个路线。所以我尝试在组件文件上运行它并且它不起作用。所以我尝试使用createContainer，我跟踪了流星网站上的文档，但是我得到的数据是＆＃34; Uncaught ReferenceError：props未定义＆＃34;错误。请帮我找一下我做错了什么。提前谢谢。

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { createContainer } from 'meteor/react-meteor-data'

import { Temp } from './../api/temp';

import Navigation from './Navigation';
import Readings from './Readings';


// Tracker.autorun(function () {
//   console.log(Temp.find().fetch());
//   });

export class App extends React.Component {

render() { 
return (
            <div>
             <Navigation/>
             <h1>HomePage</h1>
             <Readings temp={props.getData}/>
            </div>
        );
     }
  }

export default createContainer(() => {
  Meteor.subscribe('temp');
  return { 
      getData: Temp.find().fetch()
  };
}, App);

Answer 1

props未定义，因为它位于类实例上，可以使用this.props进行访问。你可以阅读es6课程并做出反应here。

但是，您会发现，在组件呈现时，您的订阅尚未准备就绪。因此，使用订阅句柄来测试它是否准备好并在此期间显示加载器。

export class App extends React.Component {
  render() {
    const {ready, getData} = this.props;
    if (!ready) return (<div>loading...</div>);
    return (
      <div>
        <Navigation/>
        <h1>HomePage</h1>
        <Readings temp={getData}/>
      </div>
    );
  }
}

export default createContainer(() => {
  const handle = Meteor.subscribe('temp');
  return {
      ready: handle.ready(),
      getData: Temp.find().fetch()
  };
}, App);

Meteor - createContainer无法渲染到React

1 个答案: