【问题标题】:Show All Users in Meteor React Client在 Meteor React 客户端中显示所有用户
【发布时间】:2017-05-04 03:06:06
【问题描述】:

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

所有用户的数据都以allUsers 发布在Users.js 中,而客户端从createContainer 提供的createContainer 中订阅allUsers 发布。

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

在服务器端运行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>
        )
    }
}

【问题讨论】:

  • 赞成使用复数“are”作为数据。
  • @ffxsam,刚刚解决了这个问题。我有import User from './User';,但正在导出Users而不是User。这以某种方式搞砸了出版物订阅。终于解决了!!
  • @Nyxynyx 很高兴听到! :)
  • @Nyxynyx 很高兴听到您解决了您的问题 :)。我认为我的答案仅适用于 angular2-meteor。 React 可能有不同的发布方式。我已经在 angular-meteor.com/tutorials/socially/angular2/… angular2-meteor 官方教程的 Meteor.users 的 14.4 Create Users 集合上检查了它。你可以检查。对于 Angular,您实际上必须创建一个集合。我虽然它也适用于 React。反正我只是想帮忙
  • @AmitSuhag 非常感谢您的帮助!!

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


【解决方案1】:

我在使用 angular 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({});      
            });

我在 Angular 2 中做到了。您请在最后一个订阅部分使用反应语法。

【讨论】:

  • 我尝试了import { Meteor, MongoObservable } from 'meteor/meteor';const Users = MongoObservable.fromExisting(Meteor.users);,但在浏览器控制台中得到了错误Uncaught TypeError: Cannot read property 'fromExisting' of undefined
  • 是否需要安装任何软件包才能访问MongoObservable?比如npmjs.com/package/meteor-rxjs 还是现在Meteor内置了?
  • 你不必使用 MongoObservable。在 react meteor 中应该有一种从现有创建集合的方法。首先尝试使用 export const Tasks = new Mongo.Collection(Meteor.users);我从未使用过 react,所以不能准确告诉你,但应该有一些方法。
  • @Nyxynyx 实际上如果你见过你的 mongodb,流星会自动为 Meteor.users 创建一个用户集合。你只需要使用那个集合。为此,您可以创建一个新集合,该集合将使用 new Mongo.Collection(Meteor.users) 作为默认用户集合的副本;或者你可以直接订阅你的monogdb用户集合。
猜你喜欢
  • 2016-10-01
  • 2015-09-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-10
  • 1970-01-01
  • 1970-01-01
  • 2012-12-22
相关资源
最近更新 更多