javascript - 使用 filter() 后无法获取对象的属性

Question

我试图使用 filter() 从对象数组中分离出一个对象，然后在 React 中显示该对象的标题。

oneliner 看起来像这样：

 {Object.values(articles).filter(e => e.id==36)[0].title}

现在过滤后，我得到一个大小为 1 的数组，其中包含我想要的对象：

{Object.values(articles).filter(e => e.id==36).map(e =>
 console.log(e))}

输出：

> Object { id: 36, title: "Fine landskap i ny dokumentar", img:
> "/images/landscape2.jpg", date: "2019-10-31 11:49", author: "The
> Onion", ingress: "Heyo", content: "Helt fantastisk", category:
> "Kultur", rating: 2 }

我的问题是，当我尝试在过滤器函数之后添加 [0].title 时，我得到一个 TypeError 说：

TypeError: Object.values(...).filter(...)[0] 未定义

这也没有意义，因为：

{Object.values(articles).filter(e => e.id==36).length}

输出 1。

当我只用 [0] 调用它时，我得到一个合理的错误。

{Object.values(articles).filter(e => e.id==36)[0]}

输出：

错误：对象作为 React 子项无效（找到：对象与键 {id、title、img、date、author、ingress、content、category、rating}）。如果您打算渲染一组子项，请改用数组。

过滤器函数显然给了我一个包含我想要的对象的数组，但我无法访问任何对象的属性。

标签： javascriptreactjs

Answer 1

奇怪的是这不起作用...

你可以试试find。它将返回您要查找的对象：

{Object.values(articles).find(a => a.id==36).title || 'fallback if article is not found'}