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

Question

看看我在与帮助我解决这个问题的@Akrion的对话下面的评论，看看解决方案

我对reactJS和axios都很陌生，但早些时候和一个同学一起尝试了一些东西，现在我被卡住了。我想从json文件中呈现"sport"类别，但相同的类别会出现好几次。什么是一种好的做法来整理重复的内容，这样"足球"只出现一次？

很抱歉，我还是个新手。我一直在尝试一些东西，比如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)]