显示Meteor React Client中的所有用户

时间:2016-12-19 05:27:51

标签: javascript node.js reactjs meteor meteor-react

我在让所有注册用户在客户端显示时遇到一些麻烦。 std:accounts-ui包含.meteor/packages个包。 autopublish包已被删除。

所有用户的数据都以Users.js allUsers的形式发布,而客户则从allUsers提供的createContainer内订阅react-meteor-data出版物。

然而,该页面仅呈现当前登录用户的详细信息。在浏览器JS控制台中运行Meteor.users().find().fetch()仅显示当前登录的用户,如果用户未登录则不显示任何内容。< / p>

在服务器端运行console.log(Meteor.users.find().fetch()会正确输出所有用户。

为什么会在浏览器上发生这种情况?

/imports/api/Users.js

import { Meteor } from 'meteor/meteor';

if (Meteor.isServer) {
    Meteor.publish('allUsers', function() {
        return Meteor.users.find({});
    })
}

/imports/ui/App.jsx

import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Accounts } from 'meteor/std:accounts-ui';
import { Table } from 'react-bootstrap';
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>
                            <td>createdAt</td>
                        </tr>

                        { this.renderUsers() }

                    </tbody>
                </Table>
            </div>
        )
    }
}

App.propTypes = {
    users: PropTypes.array.isRequired
}

export default createContainer(() => {
    Meteor.subscribe('allUsers');

    return {
        users: Meteor.users.find().fetch()
    }
}, App);

/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>{ _.get(this.props, 'user.emails[0].address', 'UNKNOWN') }</td>
                <td>{ this.props.user.createdAt }</td>
            </tr>
        )
    }
}

1 个答案:

答案 0 :(得分:2)

当我使用角度2和流星时,我遇到了同样的问题。我还尝试使用Meteor.users.find({});

访问数据

但这不是正确的使用方法。 首先使用它,你应该创建一个像这样的新集合

export const Users = MongoObservable.fromExisting(Meteor.users);<-- most important line

然后在

Meteor.publish("userData", function() {
        if (Roles.userIsInRole(this.userId, 'admin')) {
            return Meteor.users.find();
        } else {
            const selector = {
                '_id': this.userId
            };
            return Meteor.users.find(selector);
        }
    });

并通过订阅在您的文件中使用。

MeteorObservable.subscribe('userData').subscribe(() => { 
                     this.userlist=Users.find({});      
            });

我是在角度2.you plz使用反应语法为最后订阅部分。