Reactjs排序和过滤组件

Question

我是React的新手。我已经为一个作业实现了以下代码。目标是获得电影列表，并在单击电影时显示开头的爬网。我决定使用两个组件，因为必须进行造型(左边是电影，右边是爬行(。

现在我还需要两个选项：按年份或id对电影进行排序，然后用上面的搜索栏进行筛选。

如何在组件中做到这一点？

这是我的代码：

import React, { Component } from 'react';
import './App.css';
class StarWarsApp extends React.Component{
constructor(props){
super(props);
this.handleSort = this.handleSort.bind(this);
this.handleMovies = this.handleMovies.bind(this);
this.handleClick = this.handleClick.bind(this);
this.state = {
movies: [],
crawl: ['No movie selected']
}
this.handleMovies();
}
handleMovies(){
fetch('"https://swapi.co/api/films"').then(results => {
return results.json();
}).then(data => {
let movies = data.results;
console.log(movies);
this.setState(() => {
return{ 
movies: movies 
}
})
})
}
handleClick(event){
fetch('https://swapi.co/api/films'+event.currentTarget.id).then(results => {
return results.json();
}).then(data => {
let crawl = data.results.opening_crawl;
this.setState(() => {
return{ 
crawl:crawl 
}
})
})
}
render(){
const title = 'Star Wars';
return(
<div>
<Header title={title}/>
<Sort  handleSort={this.handleSort}/>
<Movies handleClick={this.handleClick} movies={this.state.movies}/>
<Crawl crawl={this.state.crawl}/>
</div>
)
}
}   

class Header extends React.Component{
render(){
return(
<div>
<h1>{this.props.title}</h1>
</div>
)
}
}
class Movies extends React.Component{
render(){
return(
this.props.movies.map((movie) => 
<div onClick={this.props.handleClick} id={movie.episode_id} key={movie.episode_id}>
{
<p><Movie title={movie.title}/></p> 
}
</div>
)
)
}
}
class Movie extends React.Component{
render(){
return(
<div>{this.props.title}</div>
)
}
}
class Crawl extends React.Component{
render(){
return(
<div className="split right">
{this.props.crawl}
</div>
)
}
}

export default StarWarsApp;

Answer 1

您的handlesort函数应该是这样的：

handleSort = () => {
let copyOfMovies = this.state.movies.slice();
const sortedMovies = movies.sort((a,b) => {
const nameA = a.name.toUpperCase(); // ignore upper and lowercase
const nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
this.setState({movies:sortedMovies})
}