我正在使用 React Komposer Meteor 和 React 。 我有这个组件
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);
我从 Tracker 重新计算函数中得到异常:
debug.js:41TypeError: 无法读取未定义的属性“header”
我能做什么呢。
当我看向 meteor 玩具时。我可以在组件中看到订阅。
这是我的出版物
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 });
});
最佳答案
您可能没有获取数据记录。
即使订阅句柄
准备就绪,查询也有可能返回未定义
,因为集合中没有数据或者您的查询错误。
在这种情况下,查询似乎确实是错误的,导致您将 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});
}
}
关于javascript - React Komposer、react 和 Meteor,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38972184/