Javascript 已解决：遍历数组并仅选择第一个值TS&；反应

尝试创建动态过滤器时，它读取数组并返回一个按钮，然后过滤呈现的数据。我正试图让它只显示独特的过滤器，虽然不能找出如何。我当前的代码：

 const typeFilter = data?.venuesByCountry.map(v => (
    v.venueTypes.map(a =>(
    <>
      <Button onClick={() => filterC(`${a}`)}>{a}</Button>
    </>
    ))
  ))

但我希望它能返回如下内容：

["VENUE"]
["RESTAURANT"]
["BAR"]
["DRINKS"]
["PUB"]

或：

任何帮助都将不胜感激

编辑

以下是我采用的解决方案：

  const typeFilter = data?.venuesByCountry.reduce((acc, item) => {
    item.venueTypes.forEach(v => {
      (acc.indexOf(v) < 0) ? acc.push(v) : null })
      return acc
    }, []).map(a => (
      <>
      <Button $style={{marginRight:'6px'}} onClick={() => filterC(`${a}`)}>{a.toString().replace(/_/g, ' ')}</Button>
      </>
  ))

const typeFilter=data？.venuesByCountry.reduce（（会计科目，项目）=>{
item.venueTypes.forEach（v=>{
（acc.indexOf（v）<0）？acc.push（v）：null}）
返回acc
}，[]）。地图（a=>(
filterC（`a}`）}>{a.toString（）.replace（///ug，'）}
))

---

感谢您的快速回复

如果您想展平阵列

  const newArray = data.venuesByCountry.reduce((acc, item) => {
    return acc.concat(item.venueTypes);
  }, [])

如果您的数据如下所示

const venuesByCountry = [
    { venueTypes: [1, 2] },
    { venueTypes: [3, 4] },
]

然后您将得到

newArray

成为

[1,2,3,4]

如果你想使物品独一无二，那么你可以这样做

const venuesByCountry = [
    { venueTypes: [1, 2, 3] },
    { venueTypes: [3, 4] },
]

const newArray=venuesByCountry.reduce（（acc，item）=>{
item.venueTypes.forEach（v=>{
如果（根据指数（v）<0）{
附件推送（v）
}
})
返回acc
}, [])

---

当然，有很多Lodash函数可以用来替换上述函数。

如果要展平阵列

  const newArray = data.venuesByCountry.reduce((acc, item) => {
    return acc.concat(item.venueTypes);
  }, [])

如果您的数据如下所示

const venuesByCountry = [
    { venueTypes: [1, 2] },
    { venueTypes: [3, 4] },
]

然后您将得到

newArray

成为

[1,2,3,4]

如果你想使物品独一无二，那么你可以这样做

const venuesByCountry = [
    { venueTypes: [1, 2, 3] },
    { venueTypes: [3, 4] },
]

const newArray=venuesByCountry.reduce（（acc，item）=>{
item.venueTypes.forEach（v=>{
如果（根据指数（v）<0）{
附件推送（v）
}
})
返回acc
}, [])

---

当然，有很多Lodash函数可以用来替换上述函数。

首先：需要合并数据数组 使用flat方法创建一个新数组，其中所有子数组元素递归连接到该数组中，直至指定深度

例：：

第二步：需要从阵列中删除重复项

最简单的方法（在我看来）是使用Set对象，它允许您存储任何类型的唯一值。换句话说，Set将自动为我们删除重复项

前南斯拉夫联盟共和国补编：

代码中的实现：

const typeFilter=data&&[…新集合（data.venuesByCountry.flat（））].map（v=>(
v、 venueTypes.map（a=>(
filterC（`a}`）}id={a}>{a}
))
))

首先：您需要合并数据数组 使用flat方法创建一个新数组，其中所有子数组元素递归连接到该数组中，直至指定深度

例：：

第二步：需要从阵列中删除重复项

最简单的方法（在我看来）是使用Set对象，它允许您存储任何类型的唯一值。换句话说，Set将自动为我们删除重复项

前南斯拉夫联盟共和国补编：

代码中的实现：

const typeFilter=data&&[…新集合（data.venuesByCountry.flat（））].map（v=>(
v、 venueTypes.map（a=>(
filterC（`a}`）}id={a}>{a}
))
))

这将数组设置为：

[“场地”、“餐厅”、“酒吧”、“饮料”、“酒吧”、“酒吧”、“饮料”]

谢谢您，现在我需要将它设置为

[“场地”、“餐厅”、“酒吧”、“饮料”、“酒吧”]

所以它只显示独特的入口您可以添加lodash uniq，lodash也支持扁平化。但我可以编写一个简单的版本，将更新答案。这将数组设置为：

[“场地”、“餐厅”、“酒吧”、“饮料”、“酒吧”、“饮料”、“酒吧”、“饮料”]

谢谢您，现在我需要将其设置为

[“场地”、“餐厅”、“酒吧”、“饮料”、“酒吧”]

这样它只显示唯一的条目您可以添加lodash uniq，平坦部分也由lodash支撑。但是我可以编写一个简单的版本，会更新答案。

const uniqueData = [...new Set(mergedData)]
console.log(uniqueData)

 const typeFilter = data && [...new Set(data.venuesByCountry.flat())].map(v => (
    v.venueTypes.map(a =>(
    <>
      <Button onClick={() => filterC(`${a}`)} id={a}>{a}</Button>
    </>
    ))
  ))