React中如何提取数据集唯一值并渲染侧边栏过滤选项？

核心思路：先提取唯一标题，再渲染列表 #

原代码的问题在于循环逻辑混乱，每次渲染都重复遍历数据集且去重逻辑失效。可以用Set快速实现去重，步骤如下：

1. 提取并去重标题
   在组件内部先处理PRODUCTS，提取每个漫画的标题（逗号前部分），利用Set自动去重的特性得到唯一标题数组：

const uniqueTitles = [...new Set(PRODUCTS.map(product => product.name.split(",", 1)[0]))];

注：split(",",1)返回的是数组，所以要加[0]取出字符串值，否则Set会把数组当成不同元素，无法去重。

2. 渲染唯一标题列表
   直接遍历去重后的数组生成<li>，用标题作为key（保证唯一性）：

import React from "react";
import { PRODUCTS } from "../Utilities/PRODUCTS";
import "./SideNav.scss";

const SideNav = (props) => {
    // 提取并去重标题
    const uniqueTitles = [...new Set(PRODUCTS.map(product => product.name.split(",", 1)[0]))];

    return (
        <div className="sideNav-container">
            <div className="sideNav-title"></div>
            <ul>
                {uniqueTitles.map(title => (
                    <li key={title}>{title}</li>
                ))}
            </ul>
        </div>
    );
};

export default SideNav;

原代码问题分析 #

• arr变量重置：let arr = []在组件每次渲染时都会重置为空，无法累积去重结果；
• 循环嵌套错误：在PRODUCTS.map内部又遍历整个PRODUCTS，导致每个产品都被处理15次，重复注入数据；
• return时机错误：内层循环中提前return null或单个<li>，导致map只返回第一个符合条件的元素，后续元素被忽略。

替代方案（不用Set，用filter） #

如果偏好使用filter方法，可以结合findIndex实现去重：

const uniqueTitles = PRODUCTS.map(product => product.name.split(",",1)[0])
    .filter((title, index, self) => self.findIndex(t => t === title) === index);

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