React/Meteor 组件未正确传递道具

Question

Meteor 新手，遇到了这个问题。我正在使用 Meteor 1.3.3

当我尝试将 props 从我的父容器传递到我的 React 组件时，它不断抛出一个错误，我将在下面发布。

这是我的 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)

这是我的 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>
    })
  }

所以当我转到 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(prospect[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)