Javascript 在Meteor React客户端中显示所有用户

我在让所有注册用户显示在客户端时遇到一些问题<代码>std:accounts ui软件包包含在

.meteor/packages

中<代码>自动发布程序包已被删除

所有用户的数据以

alluser

的形式发布在

users.js

中，而客户端则从

react meteor data

提供的

alluser

中订阅

createContainer

发布

但是，该页面仅显示当前登录用户的详细信息。在浏览器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);

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>
        )
    }
}

import React，{Component，PropTypes}来自'React'；
从“meteor/react meteor数据”导入{createContainer}；
从“meteor/std:Accounts ui”导入{Accounts}；
从'react bootstrap'导入{Table}；
从“./User”导入用户；
导出类应用程序扩展组件{
渲染器（）{
返回此.props.users.map（（用户）=>(
));
}
render（）{
返回(
使用者
身份证件
电子邮件
创建数据
{this.renderUsers（）}
)
}
}
App.propTypes={
用户：PropTypes.array.isRequired
}
导出默认createContainer（（）=>{
Meteor.订阅（“诱惑者”）；
返回{
用户：Meteor.users.find（）.fetch（）
}
}，App）；

/imports/ui/User.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);

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>
        )
    }
}

import React，{Component}来自'React'；
导出默认类用户扩展组件{
render（）{
返回(
{this.props.user.\u id}
{{.get（this.props，'user.emails[0].address，'UNKNOWN'））
{this.props.user.createdAt}
)
}
}

我在使用angular 2和meteor时遇到了同样的问题。我还尝试使用

meteor.users.find（{}）；

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

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

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

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

---

我是在angular 2中做的。你可以在最后一个订阅部分使用react语法。

Upvote使用复数“are”对于数据。@ffxsam，刚刚解决了问题。我从“/User”导入了

用户；

，但导出了

用户

，而不是

用户

。这不知怎么搞砸了发布订阅。终于解决了！！@Nyxynyx很高兴听到这个问题！：）@Nyxynyx很高兴听到你解决了你的问题：）。我想我的答案只适用于angular2 meteor。React可能有不同的发布方式。我已经在14.4从Meteor.angular2 Meteor官方教程创建用户集合中检查过了。你可以检查。对于angular，实际上必须创建一个集合。我想这对React也有用。不管怎样，我只是想help@AmitSuhag非常感谢你的帮助！！我试着从“流星/流星”中导入{Meteor，MongoObservable}和

const Users=MongoObservable.fromExisting（Meteor.Users）但出现错误
未捕获类型错误：无法在浏览器控制台中读取未定义的
的属性“fromExisting”。我是否需要安装任何软件包才能访问
MongoObservable
？比如说，或者说它现在已经内置在Meteor中了？你不必使用MongoObservable。在react meteor中，应该有一个从现有数据创建集合的方法。首先尝试使用export const Tasks=new Mongo.Collection（Meteor.users）；我从未使用过react，所以无法准确地告诉您，但应该有办法。@Nyxynyx实际上meteor会自动为meteor.users创建一个用户集合，如果您看到mongodb。你只需要使用这个集合。为此，您可以使用new Mongo.collection（Meteor.users）创建一个新集合，该集合将是默认用户集合的副本；或者您可以直接订阅您的monogdb用户集合。