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，标题，img，日期，作者，入口，内容，类别，等级}）。如果要渲染子级集合，请改用数组。

filter函数显然给了我想要的对象一个数组，但是我无法访问该对象的任何属性。

Answer 1

很奇怪，这不起作用...

您可以尝试"<div>" + + rates.FixedRates + "</div>"。它将返回您要查找的对象：

find

Answer 2

这是因为当您使用第一个索引[0]进行调用时，您将访问呈现在数组中的第一个对象，并尝试对其进行渲染。但是您不能直接在React中渲染对象。

因此，我想您位于组件的render方法中。

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

  return filteredObjects.map( article => {
    <div>
      <h1> {article.title} </h1>
    </div>
  })
}

但是据我了解，您只想获得一个具有 id 值的对象。所以也许您可以考虑使用.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（）不会返回数组，而是返回与谓词相对应的第一个对象。

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

使用filter（）后无法获取对象的属性

2 个答案: