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;

最佳答案

您也可以通过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>);
  }
}

关于javascript - 使用reactjs和axios防止json数组重复，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53621351/