Question

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

但是，当我在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);

Answer 1

我认为这是因为它不是在等待获取数据。

尝试一下：

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

Answer 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进行调试，因为这对我来说仍然是个谜。

虽然效果很好！

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获取所有用户将返回空对象React Meteor

3 个答案: