使用 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 () { 

  const filteredObjects = Object.values(articles).filter( article => article.id === 36)

  return filteredObjects.map( article => {

    <div>

      <h1> {article.title} </h1>

    </div>

  })

}

但据我了解，您只想获得一个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() 不会返回数组，而是返回谓词对应的第一个对象。

我想您的输入是对象的对象，但如果我错了，请随时给我您的输入结构，以便我可以根据您的需要调整我的答案。