反应Komposer，反应和流星

Question

Im使用反应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 }); 
}); 

Answer 1

很可能是你没有得到的数据记录。

即使订阅handle准备就绪后，查询仍可能返回undefined，原因可能是集合中没有数据或查询错误。

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

如果你提供一个字符串作为第一个参数find()或findOne()，假设你的意思是_id，所以它可以防止类似错误的（普通）一个你做（Questions.findOne({ id: props._id })，使用id键代替_id） 。

您可以使用error参数来更容易地捕捉这些情况（并且在出现实际错误的情况下显示有意义的错误消息）。

我也建议改变thequestion只是question或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}); 
    } 
}