从 mongo 获取所有用户返回空对象 React Meteor答案

【问题标题】：Fetching all users from mongo returns empty object React Meteor从 mongo 获取所有用户返回空对象 React Meteor
【发布时间】：2018-08-06 01:59:06
【问题描述】：

我想创建一个表格来显示我的所有用户。我使用 Meteor 的 account-ui 包来创建新用户。

但是，当我在 React 组件中调用用户时，它只会返回一个空对象。有什么我忘记了吗？像进口一样吗？

imports/api/users.js 用于发布：

import { Meteor } from 'meteor/meteor';

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

然后我调用我的组件并使用我订阅的withTracker：

import React from 'react';
import { Mongo } from 'meteor/mongo'
import { withTracker } from 'meteor/react-meteor-data';

class CollectionTable extends React.Component {

  render() {

    return (
      <table className="table table-hover table-responsive">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          {this.props.users.map(u => {
          <tr>
            <th scope="row">{u._id}</th>
            <td>{u.profile.firstname}</td>
            <td>{u.profile.lastname}</td>
            <td>{u.profile.phonenumber}</td>
          </tr>
          })}
        </tbody>
      </table>
    );
  }
}

export default withTracker(() => {
  Meteor.subscribe('users');
  return {
    users: Meteor.users.find().fetch()
  };
})(CollectionTable);

【问题讨论】：

您是否在server/main.js 中导入了users.js 文件？
嗨@Jankapunkt 谢谢你的帮助。我没有导入它。我刚刚在server/main.js 中添加了import '../imports/api/users.js';，但并没有解决问题

标签： mongodb reactjs meteor

【解决方案1】：

我认为这是因为它没有等待获取数据。

试试这个：

import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
    Meteor.publish('users',async function() {
        return await Meteor.users.find({});
    })
}

【讨论】：

【解决方案2】：

好的，所以我不知道为什么这现在有效，但我解决了这个问题：

import React from 'react';
import { Mongo } from 'meteor/mongo'
import { withTracker } from 'meteor/react-meteor-data';

export class CollectionTable extends React.Component {

componentWillReceiveProps(newProps) {
  console.log(newProps); // i get the right data!
  console.log(this.props); // empty array >_<
}

  renderUsers() {
      return this.props.users.map(u => (
          <tr key={u._id}>
            <th scope="row">{u._id}</th>
            <td>{u.profile.firstname}</td>
            <td>{u.profile.lastname}</td>
            <td>{u.profile.phonenumber}</td>
          </tr>
          ));
  }
  render() {

    return (
      <table className="table table-hover table-responsive">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          {this.renderUsers()}
        </tbody>
      </table>
    );
  }
}

export default withTracker(() => {
  const sub = Meteor.subscribe('users');
  if (sub.ready()) {
    console.log(Meteor.users.find().fetch());
    return {
      users: Meteor.users.find().fetch()
    };
  }
  return { users: [] };
})(CollectionTable);

如果有人能解释为什么this.props给出一个空数组，我将我的console.log 用于调试目的，因为这对我来说仍然是个谜。

虽然效果很好！

【讨论】：

【解决方案3】：

一个更简单的方法是在订阅调用上有一个回调函数，它会在继续之前等待它返回数据，从而允许加载用户。

var users = Meteor.subscribe('users', function() {
  return {
    users: Meteor.users.find().fetch()
  };
});

在您的 withTracker 内部（尚未测试但应该可以）：

export default withTracker(() => {
  return Meteor.subscribe('users', function() {
    return {
      users: Meteor.users.find().fetch()
    };
  });
})(CollectionTable);

【讨论】：