Как удалить дублирование стейтов в reactjs?

Question

[Константин]

Всем привет. Есть проблема с дублированием стейтов.
Получаю данные из json. Все ок. Все классно. Только они дублируются в самом json, и соответственно на самой странице.
усл.
Астрахань
Астрахань
Астрахань
Барнаул
Вологда
Вологда и тд.

В нативном js все без проблем поймал, отфильтровал, вывел.
Впилить jsку в реакт и соединить со стейтами - не смог. (может там и стейты не нужны - хз)

Сам, с ними вожусь уже несколько дней.
Буду очень благодарен если подскажите как это отфильтровать, и вывести.

import React, { useEffect, useState } from 'react'

export default function Zapros() {
  const [countryNames, setCountryNames] = useState(null)
  useEffect(() => {
    fetch('https://myjson.xxx.es')
    .then((res) => {
      if(res.ok) {
        return res.json()
      }
      throw new Error('ОШИБКА')
    })
    .then((res) => setCountryNames(res.DATA)) // DATA - параметр из json
    .catch((err) => console.log(err))
  }, [])

  return (
    <div>
      {countryNames && countryNames.map((vyvod) => {
          let country = vyvod.COUNTRY_NAME // COUNTRY_NAME - параметр из json
          return <div> {country}</div>
    })}
    </div>
  );
}

Answer 1

[Иван Кулаков]

Если нужно просто убрать дубликаты, то:

return (
    <div>
      {countryNames && countryNames.filter((item, index, array) => {
           return index > 0 ? item.COUNTRY_NAME !== array[index - 1].COUNTRY_NAME : true
      }).map((vyvod) => {
           let country = vyvod.COUNTRY_NAME
           return <div> {country}</div> // НЕ ЗАБЫВАЕМ ПРО KEY!!!
    })}
    </div>
  );

Если же нужно убрать дубликаты в стейте, то:

.then((res) => {
   setCountryNames(() => {
      return res.DATA.filter((item, index, array) => {
           return index > 0 ? item.COUNTRY_NAME !== array[index - 1].COUNTRY_NAME : true
      })
   })
})

Comments

[Константин]

Ничего не выводит вообще(
Ошибок нет ни в консоли, не на странице. Просто ничего не выводится..

UPD: второй вариант выводит, но не убирает дубликаты

[Иван Кулаков]

Константин, вы точно уверены что countryNames - это массив?

[Иван Кулаков]

Константин, похоже что у вас это не массив, а объект, покажите json либо фильтруйте объект

[Константин]

Иван Кулаков,

json по ссылке имеет такой вид

{

"DATA": [
{
"COUNTRY_NAME": "Австралия",
},

{
"COUNTRY_NAME": "Австралия",
},
]

}

[Иван Кулаков]

Константин, обновил ответ

[Константин]

Иван Кулаков,
ничччего не помогло(
перепробовал в разных вариациях ваши ответы

[Иван Кулаков]

Константин, исправьте === на !== и все сработает, прошу прощения, спать хочу просто)

[Константин]

Иван Кулаков, Иван, спасибо Вам большое за терпение и оперативные ответы. Вы мне очень помогли!)
Все работает)

[Иван Кулаков]

Константин, рад помочь) Отметьте решением :)