React中使用array.map遍历渲染时如何去除重复标签值

核心问题是当前代码直接多层嵌套遍历渲染，没有提前对分散在各层blog下的标签做聚合、去重处理，才会出现大量重复标签。按集合维度先把所有标签提取为一维数组再去重后渲染即可，具体实现如下：

实现步骤 #

• 遍历每个顶级collection集合时，不直接嵌套多层map渲染DOM
• 沿slides -> blogs -> tags的嵌套路径，把当前集合下所有tag的文本值提取出来，拍平为一维数组
• 利用ES6的Set结构自动过滤重复值，将去重后的标签数组用于渲染

可直接复用的代码 #

推荐用flatMap做数组扁平化，代码最简洁：

<Flex>
  {allPrismicCollection.nodes.map((collection) => {
    // 扁平化提取当前集合下所有标签文本
    const allTagTexts = collection.data.slides.flatMap(coll => 
      coll.slide.document.data.blogs.flatMap(s =>
        s.blog.document.data.tags.map(t => t.tag)
      )
    )
    // Set自动去重后转回数组
    const uniqueTags = [...new Set(allTagTexts)]

    return (
      <Navbar key={collection.id}>
        <NavTitle>{collection.data.collection.text}</NavTitle>
        <NavbarFlex>
          {uniqueTags.map(tag => (
            <NavLink key={tag}>
              <Link to="#">{tag}</Link>
            </NavLink>
          ))}
        </NavbarFlex>
      </Navbar>
    )
  })}
</Flex>

如果项目需要兼容不支持flatMap的旧环境，可以用多层forEach的写法，逻辑完全一致：

<Flex>
  {allPrismicCollection.nodes.map((collection) => {
    const tagSet = new Set()
    // 逐层遍历把所有标签加入Set，自动去重
    collection.data.slides.forEach(coll => {
      coll.slide.document.data.blogs.forEach(s => {
        s.blog.document.data.tags.forEach(t => {
          tagSet.add(t.tag)
        })
      })
    })
    const uniqueTags = Array.from(tagSet)

    return (
      <Navbar key={collection.id}>
        <NavTitle>{collection.data.collection.text}</NavTitle>
        <NavbarFlex>
          {uniqueTags.map(tag => (
            <NavLink key={tag}>
              <Link to="#">{tag}</Link>
            </NavLink>
          ))}
        </NavbarFlex>
      </Navbar>
    )
  })}
</Flex>

注意事项 #

• 渲染列表项时一定要加唯一key属性，标签值本身全局唯一的话直接用tag文本当key即可，比用数组索引性能更好
• 原代码里大量空的<></>Fragment包裹没有实际作用，数据提前聚合后可以直接删掉，简化代码结构
• 因为所有tag都是字符串类型，Set的严格相等判断可以完全准确完成去重，不会出现误判

内容的提问来源于stack exchange，提问作者Jaacoubi