Как в React не рендерить элементы с одинаковым полем?

Question

[TheBott]

Как в React не рендерить элементы с одинаковым полем? То есть есть массив объектов, который надо выводить, но елементы с одинаковым полем, например id (понимаю что такого не может быть, но как пример), вывести только один раз, а остальные элементы у которых совпадает id проигнорировать и выводить дальше map'ом остальные элементы у которых не повторяется id

Answer 1

[Иван Клименко]

const array = [
    {
        name: 'Jonh',
        age: 32
    }, {
        name: 'James',
        age: 33
    }, {
        name: 'Jacob',
        age: 33
    }
];

const key = 'age';
const values = new Set();

const filtredArray = array.filter(item => {
    const value = item[key];
    if (!values.has(value)) {
        values.add(value);
        return true;
    }
    return false;
});

Comments

[TheBott]

круто, спасибо

Answer 2

[hzzzzl]

никак, сначала придется отфильтровать массив
на быструю руку так, если там не миллиард элементов, то прокатит по производительности

ar = [{id: 2},{id: 23},{id: 21},{id: 244},{id: 21},{id: 2},{id: 22},{id: 23}]

const uniqIds = new Set(ar.map(a => a.id));

[...uniqIds]
  .map(id => ar.find(a => id === a.id))
  .map(el => <Component data={el} />)

Comments

[Иван Клименко]

Вы же понимаете, что у вас квадратичная сложность?

[hzzzzl]

Иван Клименко, после другого варианта в комментах да, но я и говорю "на быструю руку" ^^

Answer 3

[Sergey]

Надо подавать массив сразу с уникальными элементами, зачем лишние данные пересылать?

Comments

[TheBott]

тоже верно