反应/流星组件没有正确传递道具

Question

流星的新成员并遇到此问题。我正在使用流星1.3.3

当我尝试从我的父容器传递道具到我的React组件时，它会一直抛出一个错误，我会在下面发帖。

这里是我的阵营组件Prospect.jsx：

import React from 'react' 
import { createContainer } from 'meteor/react-meteor-data' 
import { Residents } from '/collections/residents.jsx' 

import ReactDOM from 'react-dom'; 
import RaisedButton from 'material-ui/RaisedButton'; 

// import '/collections/residents.jsx' 

class Prospect extends React.Component { 
    render() { 
    return(
     <div> 
     <h1>Prospect Resident - {this.props.prospect.name.first} </h1> 
     <RaisedButton label="Default" /> 
     </div> 
    ) 
    } 
} 

Prospect.propTypes = { 
    // prospect: React.PropTypes.object 
} 

export default createContainer((params) => { 
    const paramsId = params.params.prospectId 
    Meteor.subscribe('residents'); 
    // Meteor.subscribe('resident'); 
    prospect = Residents.find({_id: paramsId}).fetch() 
    console.log(prospect[0]) 

    return { 
    prospect: prospect 
    } 
}, Prospect) 

，这里是我的蒙戈集合

residents.jsx

import { Mongo } from 'meteor/mongo' 

export const Residents = new Mongo.Collection('residents') 

const nameSchema = new SimpleSchema({ 
    first: {type: String}, 
    last: {type: String} 
}) 

const residentSchema = new SimpleSchema({ 
    cId:    { type: String }, 
    name:    { type: nameSchema }, 
    status:    { type: String }, 
}) 

Residents.attachSchema(residentSchema) 



// METHODS 
Meteor.methods({ 
    'residents.insert'(resident) { 
    Residents.insert(resident) 
    } 
}) 



// PUBLICATIONS 
if(Meteor.isServer) { 
    Meteor.publish('residents', function() { 
    return Residents.find() 
    }) 

    Meteor.publish('resident', function(id) { 
    return Residents.find({_id: id}) 
    }) 
} 

，这里是我的路线

FlowRouter.route('/prospects/:prospectId}', { 
    name: 'prospectShow', 
    action(params) { 
    mount(LoggedIn, { content: 
     <MuiThemeProvider muiTheme={getMuiTheme()}> 
     <Prospect params={{prospectId: params.prospectId}} /> 
     </MuiThemeProvider> 
    }) 
    } 

所以wh带我去为localhost：3000路由我得到的错误

Prospect.jsx:14Uncaught TypeError: Cannot read property 'name' of undefined 
Exception from Tracker recompute function: 
debug.js:41 TypeError: Cannot read property '_currentElement' of null 
at ReactCompositeComponentWrapper._updateRenderedComponent  (ReactCompositeComponent.js:772) 
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:753) 
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:672) 
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:571) 
at Object.receiveComponent (ReactReconciler.js:127) 
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:775) 
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:753) 
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:672) 
at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:585) 
at Object.performUpdateIfNecessary (ReactReconciler.js:160) 

我的console.log（前景[0]）在容器返回对象蛮好的，它也可以，如果我在传递这样

return { 
    prospect: {name: {first: 'Joe', last: 'Smith'}} 
} 

所以这是关于返回的对象，我认为。任何帮助将不胜感激，谢谢

Answer 1

我结束了去这样的解决方案。如果有人想回答并解释为什么这是必要的（我认为在流星1.3这不再需要），我会接受你的答案。

import React from 'react' 
import { createContainer } from 'meteor/react-meteor-data' 
import { Residents } from '/collections/residents.jsx' 


class Prospect extends React.Component { 
    render() { 
    if(!this.props.ready){return <span>Loading...</span>} 
    const { prospect } = this.props 
    return(
     <div> 
     <h1>{prospect.name.first} {prospect.name.last}</h1> 
     <div>Company: <b>{prospect.cId}</b></div> 
     </div> 
    ) 
    } 
} 

Prospect.propTypes = { 
    ready: React.PropTypes.bool.isRequired, 
    prospect: React.PropTypes.object.isRequired 
} 

export default createContainer((params) => { 
    return { 
    ready: Meteor.subscribe('resident', params.id).ready(), 
    prospect: Residents.findOne(params.id) 
    } 
}, Prospect)