Meteor React Error: Cannot read property '0' of undefined

Question

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

然而，当试图显示每个用户的电子邮件地址时，浏览器 JS 控制台抛出以下错误，尽管电子邮件地址在 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;
}

Meteor React Error: Cannot read property '0' of undefined

Meteor React Error: Cannot read property '0' of undefined

javascript

node.js

meteor

reactjs

meteor-react