リアクション/流星のコンポーネントが正しくプロップを通過していない

Question

この問題には新しく流行しました。私は流星を使用しています。1.3.3

私の親コンテナから私のリアクションコンポーネントに小道具を渡そうとすると、私は以下に投稿するエラーを投げかけます。ここで

は私がコンポーネント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) 

、ここでは私のMongoのコレクションは

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私は、ローカルホストへ行く途中：私は取得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)