Question

在一个使用React的非常简单的Meteor应用程序中，有一个表格列出了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;
}

流星反应错误：无法读取属性＆＃39; 0＆＃39;未定义的

1 个答案: