Удалить повторные значения свойства "name" в объекте useState

Question

Удалить повторяющиеся сво-ва в объекте, который в массиве useState. Затем полученный уникальные массив с объектами запушить в другой useState

Пример:

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([]);

....

const[uniqueArr, setUniqueArr] = useState([ /* выход - p.s: заметьте, удаляем второй повторяющийся объект */
    {name: "Sp. Moscow", games: 22},
    {name: "Krasnodar", games: 52},
    {name: "Zenit", games: 52},
]);

По

Answer 1

Удалить повторяющиеся сво-ва в объекте, который в массиве useState. Затем полученный уникальные массив с объектами запушить в другой useState

Предложу такой вариант...

const arr = [ /* ввод  */
    {name: "Sp. Moscow", games: 22},
    {name: "Sp. Moscow", games: 12},
    {name: "Krasnodar", games: 52},
    {name: "Zenit", games: 52},
    {name: "Krasnodar", games: 2},
]
const a = test(arr)
console.log(a)
// потом можно сетить
//setUniqueArr(a)

// удаляем повторения
function test(a) {
  const s = new Set()
  return a.filter(o => {
    if (s.has(o.name)) return false
    s.add(o.name)
    return true
  })
}

Answer 2

Для удаления повторяющихся объектов из массива можно воспользоваться методом 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() принимает два аргумента: функцию обратного вызова и начальное значение аккумулятора.
Функция обратного вызова принимает два аргумента: аккумулятор и текущий элемент массива. Внутри функции обратного вызова мы проверяем, есть ли объект с таким же значением свойств в аккумуляторе. Если объекта нет, мы добавляем текущий объект в аккумулятор. В конце мы возвращаем аккумулятор как итоговое значение.

Answer 3

Если надо выполнить преобразование только один раз, при монтировании компонента, то можно сделать так:

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(arr.reduce((acc, it) => {
  if (!acc.find(el => el.name === it.name)) acc.push(it);
  return acc;
}, []));

БЛОГ НА HUSL

Удалить повторные значения свойства "name" в объекте useState

Ответы (3 шт):