Удалить дубликаты из вложенных объектов карты javascript

Question

Я отображаю данные в сетке, используя вложенную карту, которая выглядит как

{
    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))])} , но это возвращает каждую итерацию сопоставленного объекта

Answer 1

Простой способ состоит в том, чтобы создать массив, в который вы нажимаете элементы, которые печатаются. И перед печатью другой проверьте, присутствует ли он в массиве или нет.

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>)
              }
            ) 
        )
    )
}