时间戳

首页 > 解决方案 > 已解决：遍历数组并仅选择第一个值 TS & React

javascript - 已解决：遍历数组并仅选择第一个值 TS & React

问题描述

试图制作一个动态过滤器，它读取数组并返回一个按钮，然后过滤呈现的数据。我试图让它只显示独特的过滤器，但无法弄清楚如何。我当前的代码：

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

返回：

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

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

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

或者：

["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>
      </>
  ))

感谢快速回复

标签： javascriptarraysreactjstypescriptloops

解决方案

你想展平你的阵列，

  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 => {
        if (acc.indexOf(v) < 0) {
            acc.push(v)
        }
    })
    return acc
}, [])

当然，您可以使用许多 Lodash 函数来替换上述内容。

推荐阅读