即使它打印在 console.log 中，我也无法映射对象数组

Posted 2023-03-11

【中文标题】即使它打印在 console.log 中，我也无法映射对象数组

【英文标题】：I cant map array of objects eventhough it's printed in console.log

【发布时间】：2020-10-11 22:54:56

【问题描述】：

我正在尝试映射一组对象，但它一直说文档未定义，即使我可以在 console.log 中清楚地看到它

这是我在 console.log

时得到的

console.log(this.props.results.data) 

我想要的是 docs 字段。如果我展开它看起来像这样

因为我想打印文档的内容，所以我尝试这样做

<div className='list-render'>
   this.props.results.loading ? <LoadingSpinner/> : 
      <div className='row'>
         (this.props.results.data.docs.map((data) =>  // code to print individual fields )
      </div>
   </div>
</div> 

我得到 TypeError: this.props.results.data.docs is undefined 我正在使用 mongoose-paginate-v2 库进行分页

【问题讨论】：

试试(this.props.results.data && this.props.results.data.docs.map((data) => // code to print individual fields )

还是说同样的话

那么结果不可用（还）。将您的 console.log() 更改为 console.log(JSON.stringify(this.props.results)) 并检查输出。更好的选择是添加minimal reproducible example，这样我们就可以重现问题。

正如@Andreas 已经提到的，我之前也遇到过这个问题..如果您更新数组中的任何值，您在控制台中看到的值可能在当前时间不存在，它将反映在我认为以前的日志也是由于参考。

【参考方案1】：

您需要检查docs 属性是否未定义。您可以通过以下几种方式做到这一点：

您可以使用可选链接来检查属性是否不是null 或undefined。然后您的代码将如下所示this.props.results.data?.docs.map...。 Here's how you add it to your react app（但如果您使用的是最新的 babel 版本 - 它应该可以开箱即用）

你自己做检查。正如评论中所建议的，最基本的是检查属性是否为假：

this.props.results.data.docs && this.props.results.data.docs.map((data)

评论有点不正确，你不需要检查data是否是假的（只有当错误指向那个时），你检查docs是否是假的。

【讨论】：

您可以使用optional chaining：this.props.results.data?.docs.map