在 reactjs 中映射和过滤数组答案

【问题标题】：Doing map and filter an array in reactjs在 reactjs 中映射和过滤数组
【发布时间】：2018-03-30 00:01:39
【问题描述】：

我有一个对象列表：

a = [{number:1},{category:[abc, cde]},{class:2}],
    [{number:2},{category:[abc, def]},{class:3}],
    [{number:3},{category:[def]},{class:4}]

下面是我的代码：

            b
            .filter((a, index) => (a.category === 'def'))
            .map((a, index) => (
                  <div>{a.number}</div>
               )
            )

我需要从 'a' 中列出包含 category = 'def' 的对象。好像我无法过滤它，因为我的“类别”是数组格式。大家是怎么解决的呢？

【问题讨论】：

b 未定义？
object b is jz an example sir

标签： javascript html reactjs filter

【解决方案1】：

b
.filter((v,i) => (v.category.includes('def')))
.map((v,i) => (
     <div>{v.number}</div>
))

【讨论】：

我试过了，但它仍然列出了“a”中的所有对象。怎么了？
你想要什么作为你的最终输出？
@Coolguy 你能发布完整的代码吗？如果您尝试键入没有category 的对象并尝试在其上使用includes，我会感到非常惊讶

【解决方案2】：

只需检查 def 是否在数组中，如：

a.category.includes('def')

【讨论】：

我需要列出 'a' 中包含 category='def' 的对象。怎么办？
所以您想要所有具有“def”类别的对象对吗？
是的，我只需要列出“a”中包含“def”类别的对象
完全正确，所以将a.category === 'def' 替换为a.category.includes('def')。它检查a.category 数组是否包含字符串`def`
我试过了，但它仍然列出了“a”中的所有对象。怎么了？

【解决方案3】：

您的对象存储为对象数组，这意味着您无法“键入”来检查。所以你必须检查数组的所有元素，看看 1. 键 category 是否存在 2. 看看 def 是否在包含 category 的对象中。

Array#includes 有一个经常被忽视的哥哥。 Array#some，它接受一个回调来满足你的需要。

然后您必须使用Array#find 再次遍历过滤后的数组以找到具有键number 的对象，然后打印该值。您也可以通过使用这些对象的索引号手动执行此操作，但它的健壮性要低得多。

a = [[{number:1},{category:['abc', 'cde']},{class:2}],
    [{number:2},{category:['abc', 'def']},{class:3}],
    [{number:3},{category:['def']},{class:4}]]
    
h = a.filter((arr) => {
  return arr.some((obj) => {
    if (obj.category) {
      return obj.category.includes('def')
    } else {
      return false
    }
  })
})
console.log(h)
j = h.map((arr) => {
  let numObject = arr.find((obj) => ('number' in obj));
  if (numObject) {
    return numObject.number
  } else {
    return //something
  }
})
console.log(j)

【讨论】：