Meteor React Error：未定義のプロパティ '0'を読み取ることができません

Question

Reactを使用する非常に単純なMeteorアプリでは、Meteor.usersコレクションの登録ユーザーをすべて一覧表示するテーブルがあります。

ただし、各ユーザーの電子メールアドレスを表示しようとすると、HTMLページに電子メールアドレスが正しく表示されますが、ブラウザのJSコンソールで次のエラーが発生します。

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; 
}