使用 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}）。如果您打算渲染一组子项，请改用数组。

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

Answer 1

奇怪的是这不起作用...你可以试试find。它将返回您要查找的对象：{Object.values(articles).find(a => a.id==36).title || 'fallback if article is not found'}

Answer 2

这是因为当您使用第一个索引 [0] 调用时，您会访问数组中存在的第一个对象并尝试渲染它。但是你不能直接在 React 中渲染一个对象。所以我想你在你的组件的渲染方法中。render () {&nbsp;&nbsp; const filteredObjects = Object.values(articles).filter( article => article.id === 36)&nbsp; return filteredObjects.map( article => {&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h1> {article.title} </h1>&nbsp; &nbsp; </div>&nbsp; })}但据我了解，您只想获得一个id值为 36 的对象。所以也许您可以考虑改用.find()方法。const findObjectId = Object.values(articles).find( article => article.id === 36)当然你可以这样写：{ Object.values(articles).find( article => article.id === 36).title || ‘ No object found with this id ‘ }使用 find() 不会返回数组，而是返回谓词对应的第一个对象。我想您的输入是对象的对象，但如果我错了，请随时给我您的输入结构，以便我可以根据您的需要调整我的答案。