我如何构建一个重新排序数组对象方法获取Swapi

Question

我正在建立一个电影网格，返回他们的Id，缩略图，标题，剧集编号和发布日期。

如何为reorder重定序值映射reorderByDate（）和reorderByEpisode（）方法？

CodeSandbox Demo＆Api Documentation Swapi

Films.js组件：

import React, { Component } from 'react';
import axios from 'axios';
import ListFilms from './ListFilms'

class Films extends Component {
  constructor(props) {
    super(props);

    this.state = {
      films: [],
    }

    this.getFilms = this.getFilms.bind(this)
  }

  getFilms() {
    return axios.get('https://swapi.co/api/films')
      ...
      })
  }

  reorderByDate = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.release_date > b.release_date
        ? 1
        : b.release_date > a.release_date
        ? -1
        : 0
    );
    this.setState({ films });
  };

  reorderByEpisode = () => {
    let films = this.state.films.map(item => ({ ...item }));
    films.sort((a, b) =>
      a.episode_id > b.episode_id ? 1 : b.episode_id > a.episode_id ? -1 : 0
    );
    this.setState({ films });
  };

  componentWillMount(){
    this.getFilms();
  }
  render() {
    const { films } = this.state;
    return(
      <div className="container">
        <div className="d-flex justify-content-center align-items-center mb-2">
          <p className="mb-0 mr-2">Filter by:</p>
          <button onClick={this.reorderByDate} type="button" className="btn btn-warning btn-sm">Released Date</button>
          <p className="mb-0 mx-2">or:</p>
          <button onClick={this.reorderByEpisode} type="button" className="btn btn-warning btn-sm">Episode Number</button>
        </div>
        <ListFilms films={films} />
      </div>
    )
  }
};

export default Films;

Answer 1

请使用https://codesandbox.io/s/zn923169mx的更新代码

reorderByDate = () => {
    let films = this.state.films;
    // let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime();
      let date2 = new Date(b.release_date).getTime();
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };

  reorderByEpisode = () => {
    // console.log(...films.episode_id);
    let films = this.state.films;
    films = films.sort(function(a, b) {
      return a.episode_id - b.episode_id;
    });
    this.setState({ films });
  };

Answer 2

要解决当前场景，可以在按钮上使用onClick()侦听器，并使用箭头操作符或绑定函数到this

在函数内部，使用Array.prototype.sort方法实现自定义逻辑，以便根据日期或剧集编号进行排序

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

您应该使用this.setState(prevState => nextState)函数语法，因为您尝试将films数组从现有状态对象更新为已排序数组并重新呈现

Answer 3

这是一个用release_date对电影进行排序的例子。这是你可以用它来排序其他基础的基本想法。将renderByDate()添加到Films和Films容器中的按钮以调用方法

//add this button in your `Films` component
<button onClick={this.renderByDate}>Render By Date</button>

renderByDate = () => {
    let films = this.state.films;
    //console.log("from real",films[0].release_date);
    films = films.sort((a, b) => {
      let date1 = new Date(a.release_date).getTime()
      let date2 = new Date(b.release_date).getTime()
      console.log(date1);
      return date1 - date2;
    });
    this.setState({ films });
  };