使用 reactjs 和 axios 防止 json 数组重复

Question

看看我与 @Akrion 的对话下方的我的 cmets，他帮助我解决了这个问题！！！！

我对 reactJS 和 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

理想情况下，您应该在服务器端修复数据，但您也可以在前端删除重复数据：

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

不是最有效的方法，但很简单

Answer 2

您也可以通过Array.reduce 简单地按您的帖子ID 分组，然后获取值。将您的 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 3

您可以在渲染之前使用 reduce 过滤运动，例如在 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>
    );
  }
}

Answer 4

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