Предотвратите дубликаты из массива json с помощьюactjs и axios

Question

Посмотрите на мои комментарии ниже разговора с @Akrion, который помог мне исправить это, чтобы увидеть решение !!!!

Я действительно новичок вresponseJS и axios оба, но раньше что-то пробовал с одноклассником и теперь я застрял.Я хочу отобразить "спортивные" категории из файла json, но одни и те же категории появляются несколько раз.Что такое хорошая практика, чтобы сортировать дубликаты так, чтобы только, например, "Футбол" появлялся один раз?

Извините, опять же, новичок в этом.Я пробовал некоторые вещи, такие как функции Javascript, чтобы отсортировать это ... но я просто не уверен, куда поместить код, и я продолжаю ходить кругами.Дайте мне знать, если что-то, что я сказал, сбивает с толку (английский не мой родной язык).Вот мой код:

import React, { Component } from "react";
import axios from 'axios';

class SportsList extends Component {
  state = {
    posts: []
  }
  componentDidMount(){
    axios.get('https://json-file.json')
    .then(res => {
      this.setState({
        posts: res.data
      })
    })  
  }

  render() {
    console.log(this.props)
    const { posts } = this.state;
    const postList = posts.length ? (
        posts.map(post => {
          return (
            <div key={post.id}>
              <div>
                {post.sport}
              </div>
            </div>
          )
        })
      ) : (
        <div>No Sports Available</div>
      )
    return (
      <div> 
      {postList}
    </div>
    );
  }
}

export default SportsList;

Answer 1

const newPosts = [...new Set(posts)]

Answer 2

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

res.data.reduce((acc, post) => {
  const post1 = acc.find(x => x.sport === post.sport);
  if (!post1) {
    acc.push(post1);
  }
  return acc;
}, []);

Не самый эффективный метод, но он прост

Answer 3

Вы также можете просто сгруппировать по номеру сообщения с помощью Array.reduce, а затем получить значения.Измените render на это:

render() {
    const { posts } = this.state;
    const uniquePosts = Object.values(posts.reduce((r,c) => { 
      r[c.id] = c 
      return r
    }, {}))
    const postList = uniquePosts.length ? (
        uniquePosts.map(post => {
          return (
            <div key={post.id}>
              <div>
                {post.sport}
              </div>
            </div>
          )
        })
      ) : (<div>No Sports Available</div>)
    return (<div>{postList}</div>);
  }
}

Answer 4

Вы можете использовать уменьшение для фильтрации спортивных событий перед рендерингом, например, перед setState

const sportsFiltered = sports.reduce((accum, sport) => {
    const accumulator = [...accum];
    if(!accumulator.some(item => item.id === sport.id)) {
        accumulator.push(sport);
    }
    return accumulator;
},[]);

class SportsList extends Component {
  state = {
    posts: []
  }
  componentDidMount(){
    axios.get('https://json-file.json')
    .then(res => {
      this.setState({
        posts: sportsFiltered(res.data)
      })
    })  
  }

  render() {
    console.log(this.props)
    const { posts } = this.state;
    const postList = posts.length ? (
        posts.map(post => {
          return (
            <div key={post.id}>
              <div>
                {post.sport}
              </div>
            </div>
          )
        })
      ) : (
        <div>No Sports Available</div>
      )
    return (
      <div> 
      {postList}
    </div>
    );
  }
}