Question

我只想尝试从Meteor.users集合中呈现用户文档中的消息列表。

根据guide中显示的内容，我尝试了以下内容：

import React, { PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Meteor} from 'meteor/meteor'

class Messages extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            messages: [],
        }
    }

    renderMessages() {
        console.log('usr: ' + this.props.usr) //<- undefined

        //so this wont work
        let msgs = this.props.profile.siteMessages.map((obj) => {
            return (
                <li key={obj.toString()}>
                    <div>a message </div>
                </li>
            );
        })

        return msgs;
    }

    render() {
        return (
            <div className="messages">
                <ul className="messages-list">
                    {this.renderMessages()}
                </ul>
            </div>
        );
    }
}

Messages.propTypes = {
  usr: PropTypes.object.isRequired,
};

export default createContainer(() => {

  return {
    usr: Meteor.user(),
  };
}, Messages);

请注意，在浏览器控制台中调用Meteor.user()会按预期打印用户对象。在上面的代码中，this.props.usr（以及Meteor.user()）未定义。

我在名为user.profile的{{1}}文档上有一个字段，其中只包含一系列消息，我需要将它们呈现给siteMessages。

为什么代码中<ul>未定义，但如果从浏览器控制台调用则返回正确？

Answer 1

Meteor.user()不能立即使用（我不确定技术细节），尽管Meteor.userId()是。{1}}。 Meteor.user()是被动的，因此当用户数据存在时，您的容器将重新运行/重新运行。我只是将您的render修改为：

render() {
    if (!this.props.usr) return null; // or a spinner, if you want

    return (
        <div className="messages">
            <ul className="messages-list">
                {this.renderMessages()}
            </ul>
        </div>
    );
}

从用户文档呈现消息列表

1 个答案: