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

请看我与@Akrion的对话下面的评论，他帮助我解决了这个问题，并看到了解决方案

我对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;

---

可以在渲染之前（例如在设置状态之前）使用“减少”进行过滤运动

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>
    );
  }
}

---

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

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

---

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

您也可以通过Array.reduce按帖子id进行分组，然后获取值。将渲染更改为：

---

使用集合而不是基本数组。就在渲染之后{？我只得到运动还没有定义。我还没有很好地理解错误，但我得到了一个：./src/components/SportsList.js行19：解析错误：意外标记，应为17 |渲染{18 | const{posts}=this.state；>19 | const uniquePosts=Object.valuesposts.reducer，c=>r[c.id]=c，r，{}^20}const postList=uniquePosts.length？21 | uniquePosts.mappost=>{22 | return我想它缺少Object.values的右括号，我猜它在这行的末尾？如果我把它放在那里，我仍然会得到所有的重复项。对不起：dubs？uniquePosts正在获取它看起来像的所有现有匹配项。然后我得到：第18行：意外使用逗号运算符no sequences on“c，r，{}”啊，当然对不起。这里有点晚了……我试过了。仍然得到了所有的副本。今天再次看了看你的小提琴。在我的编辑器中写下了它，并对数据进行了一些更改，然后我在看r[c.id]时意识到了这一点=c我刚刚不得不将id改为sport。正在工作。感谢您的帮助！@Joel8bitar在您的setState:this.setState{posts}中使用此选项，其中posts是上述函数调用的返回值，因此只需将其替换为以下行：res.data after posts:？

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>);
  }
}

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