Для удаления повторяющихся объектов из массива можно воспользоваться методом reduce(). Метод reduce() применяет функцию к каждому элементу массива и аккумулирует результаты в одном значении, которое в конечном итоге станет итоговым значением. В данном случае, мы будем использовать reduce() для сбора уникальных объектов на основе их свойств:
const[arr, setArr] = useState([
{name: "Sp. Moscow", games: 22},
{name: "Sp. Moscow", games: 12},
{name: "Krasnodar", games: 52},
{name: "Zenit", games: 52},
{name: "Krasnodar", games: 2},
]);
const[uniqueArr, setUniqueArr] = useState([]);
useEffect(() => {
setUniqueArr(
arr.reduce((accumulator, current) => {
// Проверяем, есть ли объект с таким же значением свойств в аккумуляторе
const match = accumulator.find(obj => obj.name === current.name && obj.games === current.games);
// Если объекта с таким же значением свойств нет, добавляем текущий объект в аккумулятор
if (!match) {
accumulator.push(current);
}
return accumulator;
}, [])
);
}, [arr]);
Здесь мы используем useEffect() для того, чтобы обновить состояние uniqueArr, когда состояние arr меняется.
Функция reduce() принимает два аргумента: функцию обратного вызова и начальное значение аккумулятора.
Функция обратного вызова принимает два аргумента: аккумулятор и текущий элемент массива. Внутри функции обратного вызова мы проверяем, есть ли объект с таким же значением свойств в аккумуляторе. Если объекта нет, мы добавляем текущий объект в аккумулятор. В конце мы возвращаем аккумулятор как итоговое значение.