在 .jsx 文件（React）中的 render() 方法中访问 Mongo 集合返回的对象答案

【问题标题】：Accessing an object returned by a Mongo collection within render() method in .jsx file(React)在 .jsx 文件（React）中的 render() 方法中访问 Mongo 集合返回的对象
【发布时间】：2017-02-16 12:15:20
【问题描述】：

在 render() 方法中分配一个变量 'res' = this.resolutions() 函数

初始代码的输出在 render() 方法中，在 <div> - {console.log(res[0])} 内部调用了一次。但是在控制台中，我们可以看到它执行了三次。

res 是一个具有值数组的对象（因为它指的是具有 8 个文档的 Mongo 集合）

因为 console.log(res[0]) 的第一次执行返回 undefined，访问对象的属性，即 {console.log(res[0].text} 将抛出错误

【问题讨论】：

console.log 在哪里，调用一个方法，例如。 {this.displayResolutions()} 然后你可以先检查你有一个数组，然后将数组映射到一些输出
亲爱的 nithin raj，欢迎来到 Stack Overflow，请以纯文本格式发布您的代码，因为这样更容易理解和帮助您。并在代码块之外解释你的代码
我已经编辑了您的问题，但请查看tour 和How to Ask 页面！
@PeteGaulton ，我只是了解数据流，即从 Meteor 中的 Mongo 集合中检索数据。如果我在
之外使用 console.log，我首先会得到一个空数组。我正在使用最新版本的 Meteor，这会导致这种行为吗？

标签： mongodb reactjs meteor

【解决方案1】：

这里的一切都按预期工作。你了解 TrackerReact 的作用和用途吗？

三个控制台输出是非常值得期待的，因为 TrackerReact 的全部目的是在 Meteor 数据源更改时重新渲染您的组件。当站点最初加载时，客户端没有可用数据，并且当服务器将您Meteor.subscribe'd 的数据发送到时，TrackerReact 将重新运行render()，因此您可以通过this.resolution() 从this.resolution() 获取新数据.fetch().

出于同样的原因，非常期望this.resolution() 随时返回一个空数组。以合理的方式处理数据不足是您组件的责任。

例如，如果您只对第一个元素感兴趣，则应先检查长度：

if (res.length > 0) console.log(res[0]);

如果你想显示所有这些，你很可能会使用Array.map，这完全可以，因为它也适用于空数组：

<div>
  {res.map(function (resolution) {
    return (<div>{resolution.text}</div>);
  })}
</div>

【讨论】：