javascript - 试图绘制出独特的反应组件

Question

我正在尝试将数据映射到反应组件中，但我只想要唯一而不是重复的组件来呈现到页面。我正在研究如何使用 filter、Set 和 unique 方法很难弄清楚如何将 React 组件用于语法

至今....

import React, { useContext } from 'react'
import Tag from '../components/Tag'
import feedbackContext from '../utils/FeedbackContext'

const Tags = () =>{

    const data = useContext(feedbackContext)
    

    return(
        <>
        {
            data.map((tag,id) =>(
                <Tag key ={id} category={tag.category}/>
            ))
        }
        </>
    )
}

export default Tags

在上面的代码片段中，它会渲染 json 文件中的所有标签，这会导致渲染重复的组件。我正在查找 unique、filter 和 Set 方法，但在渲染独特组件的情况下无法完全掌握如何使用它。有没有人这样做过？

更新，让我重新表述一下我上面的意思，它是下面的片段，我只希望每个类别名称出现一个。它在技术上不重复：

<div class="filter">
<div class="category_type">enhancement</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">enhancement</div>
<div class="category_type">feature</div>
<div class="category_type">bug</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">feature</div>
<div class="category_type">bug</div>
<div class="category_type">enhancement</div>
</div>

标签： javascriptreactjs