从 mongo returns 空对象 React Meteor 中获取所有用户

Question

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

但是，当我在 React 组件中调用我的用户时，它只是 returns 一个空对象。有什么我忘了吗？也许像进口？

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

Answer 1

好的，所以我不知道为什么这现在有效，但我这样做解决了它：

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 留作调试目的，因为这对我来说仍然是个谜。

虽然效果很好！

Answer 2

我认为发生这种情况是因为它没有等待获取数据。

试试这个：

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

Answer 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);

阅读更多：https://docs.meteor.com/api/pubsub.html#Meteor-subscribe

从 mongo returns 空对象 React Meteor 中获取所有用户

Fetching all users from mongo returns empty object React Meteor

mongodb

meteor

reactjs