首页 > 解决方案 > 从嵌套地图对象javascript中删除重复项

问题描述

我正在使用看起来像的嵌套地图在网格上显示数据

{
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
              {console.log("results", qc3.Defect)}
                <div className="row table">
                    {qc3.Defect}
                </div>
            )
        )
    )
}

它返回看起来像这样的数据

results Scuff results Sunburn results Bruise results Hail damage results Scuff results Sunburn results Bruise results Scuff results Sunburn results Hail damage

如何摆脱重复?我试过了

{console.log("unique",[...new Set(qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => qc3.Defect))])} 但这会返回映射对象的每次迭代

标签: javascriptarraysreactjsobjectecmascript-6

解决方案


简单的方法是创建一个数组,在其中推送打印的元素。在打印另一个之前检查它是否存在于数组中。

const arr = [];
{
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
              {!arr.includes(qc3.Defect) && arr.push(qc3.Defect) &&
                (<div className="row table">
                    {qc3.Defect}
                </div>)
              }
            ) 
        )
    )
}

推荐阅读