Question

要呈现文档列表，我在从订阅返回数组的函数上使用.map()：

{this.getApplications().map( (application) => {
  return application.name;
})}

但是当我想渲染这样的单个文档时：

export default class ApplicationForm extends TrackerReact(React.Component) {

  constructor() {
    super();
    this.state = {
        subscription: {
            applications: Meteor.subscribe('applications')
        }
    }
  }

  componentWillUnmount() {
    this.state.subscription.applications.stop();
  }

  getSingleApplication() {

    const applicationDoc = Applications.find().fetch();

    if (applicationDoc) {
        return applicationDoc[0];
    }
  }

  render () {

    const name = this.getSingleApplication().name;

    return (
        <div>
            {name}
        </div>
    );
  }
}

我收到以下错误：

无法读取未定义的属性“名称”

我想我错过了一些基本的javascript。

或者它可能与订阅未在页面加载时准备好有关？

Answer 1

免责声明：我从未使用过Meteor，而且未经过测试。

您需要有一些方法来对您的订阅做好准备＆＃39;如果我正确理解文档，您可以通过在订阅时传递回调函数来执行此操作。

所以你需要

constructor() {
    super();
    this.state = {
        ready: false,
        subscription: {
            applications: Meteor.subscribe('applications', () => this.setState({ready: true})
        }
    }
  }

并在渲染中：

render () {
    if (!this.state.ready) return null;
    const name = this.getSingleApplication().name;

    return (
        <div>
            {name}
        </div>
    );
  }

Answer 2

首先，如果要查找单个文档，请使用.findOne()。这会返回一个对象而不是一个光标，因此您不需要.fetch()或.map()。

getSingleApplication() {
  return Applications.findOne(); 
}

然后，如果没有找到任何内容，您需要进行防御性编码（例如，如果您的订阅尚未准备好，可能会发生这种情况）。

render () {

  const app = this.getSingleApplication();
  const name = app && app.name;

  if (name) { // assuming you don't want to render anything if there is no name
    return (
      <div>
        {app.name}
      </div>
    );
  }
}

在React with Meteor中渲染单个文档

2 个答案: