Question

在与@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;

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

您可以在渲染之前（例如在setState之前）使用reduce进行过滤器运动

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 3

您也可以简单地通过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 4

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

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

4 个答案: