React Komposer，React和Meteor

Tevin Thuku 发表于 Dev

特文·图库（Tevin Thuku）

我正在使用React Komposer流星并做出反应。我有这个组成部分

import React from 'react';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const lightMuiTheme = getMuiTheme(lightBaseTheme);

const Questiondetails = ({ thequestion }) => (
  <div>
    <MuiThemeProvider muiTheme={lightMuiTheme}>
      <h4>{thequestion.header}</h4>
    </MuiThemeProvider>
  </div>
);


export default Questiondetails;

这是容器

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { composeWithTracker } from 'react-komposer';
import CircularProgress from 'material-ui/CircularProgress';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Questiondetails from '../../../ui/components/Questiondetails/Questiondetails.jsx';
import Questions from '../../Collections/Questions/Questions.js';

function composer(props, onData) {
  const handle = Meteor.subscribe('singleQuestion', props._id);

  if (handle.ready()) {
    const thequestion = Questions.findOne({ id: props._id });
    onData(null, { thequestion });
  }
}

const darkMuiTheme = getMuiTheme(darkBaseTheme);

const MyLoading = () => (<div style={{ width: '90%', position: 'relative'   }}>
  <MuiThemeProvider muiTheme={darkMuiTheme}>
    <div style={{ margin: 'auto', right: 0, left: 0, maxWidth: 200, position: 'relative' }}>
      <CircularProgress size={1.0} />
    </div>
  </MuiThemeProvider>
</div>);

export { MyLoading };

export default composeWithTracker(composer, MyLoading)(Questiondetails);

我得到Exception from Tracker recompute function: debug.js:41TypeError: Cannot read property 'header' of undefined我该怎么办。当我看着流星玩具时。我可以在该组件中看到订阅。

这是我的出版物

import { Meteor } from 'meteor/meteor';

// import the db
import Questions from '../../../../api/Collections/Questions/Questions.js';

// the publish
Meteor.publish('singleQuestion', function(id){
  return Questions.find({ _id: id });
});

MasterAM

您可能没有获得数据记录。

即使handle准备好订阅，查询也有可能返回undefined，因为集合中没有数据，或者查询错误。

在这种情况下，查询似乎确实是错误的，从而导致您传递undefined给组件而不是预期的对象。

如果您提供字符串作为find()或的第一个参数findOne()，则假定您的意思是_id，因此它可以防止出现类似（常见）错误（Questions.findOne({ id: props._id })使用id键而不是_id）的错误。

您可以使用error参数来更轻松地捕获此类情况（并在有意义的情况下显示有意义的错误消息）。

我还建议更改thequestion为bequestion或theQuestion（更具可读性），除非有很好的理由不这样做。

function composer(props, onData) {
  const handle = Meteor.subscribe('singleQuestion', props._id);

  if (handle.ready()) {
    const question = Questions.findOne(props._id);
    let error = null;
    if (!question) {
      error = new Error('no question matches the provided id');
    }
    onData(error, {question});
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。