javascript - Why am I seeing repeated values for both columns on my table even though I'm using a Set?

Question

Hey can anyone tell me why I'm getting repeated values for both oppDesc and contestEntriesAmt even though I'm using a Set for oppDesc (contestEntriesAmt doesn't need to be in a Set because nothing's being repeated)?

Why are both oppDesc and contestEntriesAmt repeating? It just doesn't make sense.

Whenever I remove entries.map(() => {...}), oppDesc shows up correctly (no repeated values).

const oppDescData = () => {
    const dataOppDesc = oppDesc
    let desc = [];

    dataOppDesc.forEach((oppD) => {desc.push(oppD.oppDescription);});

    const dataNumEntries = numEntries
    let entries          = [];

    dataNumEntries.forEach((entry) => {entries.push(entry.SumOfEntries);});

    let filteredDesc = new Set(desc);
    let oppDescription = [...filteredDesc];

    return (
        <>
            {
                oppDescription.map((oppDesc) => {
                    return entries.map((contestEntriesAmt) => {
                        return(
                            <tr>
                                <td>{oppDesc}</td>
                                <td>{contestEntriesAmt}</td>
                            </tr>
                        );
                    })
                })
            }
        </>
    );
};

标签： javascriptreactjsdebugging

Answer 1

当您通过在地图中调用地图来交叉两个列表时，您会得到重复项。假设您有两个列表，每个列表 10 项，结果使用您的代码，您将获得 100 个 tr 条目。即使您将使用集合，并且每个数组的每个值都是唯一的 - 这仍然会发生