meteor反应错误：无法读取未定义的属性“0”

在使用React的非常简单的Meteor应用程序中，有一张表列出了Meteor.users集合中的所有注册用户。

但是，当试图显示每个用户的电子邮件地址时，浏览器JS控制台正在抛出以下错误，尽pipe电子邮件地址在HTML页面上正确呈现。

 Exception from Tracker recompute function: TypeError: Cannot read property '0' of undefined at Users.render (User.jsx:8) 

为什么这个错误发生？

/imports/ui/User.jsx

 import React, { Component } from 'react'; export default class Users extends Component { render() { return ( <tr> <td>{ this.props.user._id}</td> <td>{ this.props.user.emails[0].address }</td> // this is line 8 </tr> ) } } 

/imports/ui/App.jsx

 import React, { Component, PropTypes } from 'react'; import { createContainer } from 'meteor/react-meteor-data'; import User from './User'; export class App extends Component { renderUsers() { return this.props.users.map((user) => ( <User key={user._id} user={user} /> )); } render() { return ( <div> <h1>Users</h1> <table> <tbody> <tr> <td>ID</td> <td>Email</td> </tr> { this.renderUsers() } </tbody> </table> </div> ) } } App.propTypes = { users: PropTypes.array.isRequired } export default createContainer(() => { return { users: Meteor.users.find().fetch() } }, App); 

Answer 1

那么它似乎this.props.user.emails是未定义的。 你确定这是你正在寻找的正确的钥匙吗？

方法来解决这个问题。

拉入图书馆lodash（它会改变你的生活）

 import _ from 'lodash'; .... <td>{_.get(this.props, 'users.emails[0].address', 'UNKNOWN ADDRESS')}</td> 

如果你不想拉东西像lodash然后检查，看看是否有价值..

 var address = 'UNKNOWN ADDRESS'; if(this.props.users.emails && this.props.users.emails.length > 0) { address = this.props.users.emails[0].address; }