时间戳

首页 > 解决方案 > React：重复值仅显示在材料 ui 表中的第一项上

javascript - React：重复值仅显示在材料 ui 表中的第一项上

问题描述

我正在尝试制作一个材质 ui 表，其主体映射到一个数组上，而不是重复项目的值，我想让一个具有重复值的项目只显示在第一个孩子上。

如果数据看起来像这样：

[
   {name: 'x', value: '123'},
   {name: 'x', value: '124'},
   {name: 'x', value: '125'},
   {name: 'y', value: '234'},
   {name: 'y', value: '235'},
]

如何在第一行显示“x”，而不在下一行重复，并保持值存在？等等等等。

标签： javascriptreactjsmaterial-ui

解决方案

您似乎想根据某个字段删除重复项。您可以构建一个新数组并遍历旧数组，跟踪您已经看到的键：

const data = [
    { name: 'x', value: '123' },
    { name: 'x', value: '124' },
    { name: 'x', value: '125' },
    { name: 'y', value: '234' },
    { name: 'y', value: '235' },
];

const result = [];
const seenKeys = new Set();
for (const row of data) {
    if (seenKeys.has(row.name)) continue;
    result.push(row);
    seenKeys.add(row.name);
}

console.log(result);

我正在使用Set来跟踪已经看到哪些键。

根据评论，目的是对数据进行分组：

const data = [
    { name: 'x', value: '123' },
    { name: 'x', value: '124' },
    { name: 'x', value: '125' },
    { name: 'y', value: '234' },
    { name: 'y', value: '235' },
];

const groups = new Map();
for (const row of data) {
    let group = groups.get(row.name);
    if (!group) {
        group = [];
        groups.set(row.name, group);
    }
    group.push(row);
}

const result = [...groups].map(([name, rows]) => ({ name, rows }));

console.log(result);

我已将.name字段保留在原始值上，但如果需要，您可以映射它们以删除它们。

当然，如果您的数据只是一个名称和一个值，则group可以将行推送到 ，而不是推送row.value。你最终会得到 eg [ { name: 'x', rows: ['123', '124', '125] }, ... ]。

推荐阅读