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

Question

在render（）方法

中分配变量'res' = this.resolutions()函数

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

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

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

Answer 1

这里的一切都按预期工作。您是否了解TrackerReact的作用及其用途？

三个控制台输出是非常需要的，因为TrackerReact的整个目的是在Meteor数据源发生变化时重新渲染组件。当网站最初加载时，客户端没有可用数据，并且当服务器发送您Meteor.subscribe'的数据时，TrackerReact将重新运行render()，以便您可以从中获取新数据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>