在一个对象数组中，如何在 React 中按属性返回所有对象？答案

【问题标题】：In an array of Objects, how do I return all Objects by property in React?在一个对象数组中，如何在 React 中按属性返回所有对象？
【发布时间】：2020-08-10 05:59:07
【问题描述】：

我想做的是创建一个多复选框过滤器。因此，当我单击标题为“附件”的复选框时，它会返回属性“类型”下包含值“附件”的所有项目。但在此之前，我需要了解如何正确操作和遍历我的数据。

我有一个名为 products 的 json 文件，其中包含商店的所有产品，看起来像这样。

[
  {
  "id" : 1,
  "name" : "Net and Post Set",
  "type" : "Accessories",
  "price" : 35,
  "desc" : "It's a solid blade. 11111"
},{
  "id" : 10,
  "name" : "Platinum 3* Balls (Bag of 36)",
  "type" : "Balls",
  "price" : 12,
  "desc" : "It's a solid blade. 11111"
},{
  "id" : 22,
  "name" : "Galaxy MC2",
  "type" : "Blades",
  "category" : "Composite",
  "price" : 60,
  "desc" : "It's a solid blade. 11111"
},
{
  "id" : 23,
  "name" : "Oversized Carbon fl, st",
  "type" : "Blades",
  "category" : "Composite",
  "price" : 32,
  "desc" : "It's a solid blade. 11111"
}
]

但是当我在控制台中打印出来时，它是mess。首先，它作为数组中的数组打印。其次，该嵌套数组具有键“0”，其余值也具有键。

让我们假设我将 products.json 传递给一个函数。为了将没有前导零的数组打印到控制台，我必须调用console.log(props.products[0])。

但我的问题是如何引用props.products[0] 中所有对象的"type" 属性。 props.products[0].type 返回未定义。这意味着我必须逐步检查每一项？

【问题讨论】：

请不要在没有解释原因的情况下否决这个问题。

标签： javascript reactjs

【解决方案1】：

您可以将Array#map 用于解构。

const props = {
  products: [
    [{ "id": 1, "name": "Net and Post Set", "type": "Accessories", "price": 35, "desc": "It's a solid blade. 11111" }, { "id": 10, "name": "Platinum 3* Balls (Bag of 36)", "type": "Balls", "price": 12, "desc": "It's a solid blade. 11111" }, { "id": 22, "name": "Galaxy MC2", "type": "Blades", "category": "Composite", "price": 60, "desc": "It's a solid blade. 11111" }, { "id": 23, "name": "Oversized Carbon fl, st", "type": "Blades", "category": "Composite", "price": 32, "desc": "It's a solid blade. 11111" } ]
  ]
};
const types = props.products[0].map(({type})=>type);
console.log(types);

【讨论】：