Обновлено:
Я пытаюсь создать компонент фильтра в качестве компонента группы «Список», который будет фильтровать список фильмов на основе «Жанра». После этого я передаю отфильтрованный массив в компонент нумерации страниц. В настоящее время я не получаю сообщение об ошибке, но при выборе жанра массив фильтров не показывает никакого результата, что означает, что в отфильтрованной переменной что-то не так.
Mov ie. js
import React, { Component } from 'react'
import { Table } from 'react-bootstrap';
import Data from './data';
import Like from './Like';
import Pagination from './pagination';
import paginate from './paginate';
import ListGroup from './ListGroup'
import genre from './genre';
export default class Movie extends Component {
constructor(){
super();
this.state={
movies:Data,
pageSize:3,
currentPage:1,
genre:[],
selectedGenre:[]
}
console.log(this.state.movies)
this.handleDelete=this.handleDelete.bind(this);
}
//update the genre after component mounts
componentDidMount(){
this.setState({
genre:genre
})
console.log("genres:"+this.state.genre)
}
handleDelete= movie=>{
const del=this.state.movies.filter(item => item.id !== movie.id);
this.setState({
movies:del
})
}
//check the length of the movie
checkMovie= ()=>{
const check=this.state.movies;
if(check.length>0)
return true
}
//select the active page
handlePageChange=(page)=>{
console.log("Page changed")
this.setState({
currentPage:page
})
}
//select the active genre
handleGenreSelect=(item)=>{
console.log("Genre clicked"+genre)
this.setState({
selectedGenre:item
})
}
render() {
if(this.checkMovie()){
//const store=this.state.movies.id;
const filtered=this.state.selectedGenre
?this.state.movies.filter(i=>(
this.state.genre.id===this.state.selectedGenre.id
)):
this.state.movies;
console.log("filtered"+filtered)
const paginatedMovies=paginate(filtered,this.state.currentPage,this.state.pageSize)
const show= paginatedMovies.map((movie,i)=>{
return(
<tr key={i}>
<td>{movie.id}</td>
<td>{movie.name}</td>
<td>{movie.price}</td>
<td>{movie.rating}</td>
<td><Like/></td>
<td> <button onClick={()=>this.handleDelete(movie)}>Delete</button></td>
</tr>
)})
return (
<div className="row">
<div className="col-2">
<ListGroup
items={this.state.genre}
onItemSelect={this.handleGenreSelect}
selectedItem={this.state.selectedGenre}
/>
</div>
<div className="col">
<h3>Showing {filtered.length} movies</h3>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Movie</th>
<th>Price</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
{show}
</tbody>
</Table>
<Pagination
itemsCount={filtered.length}
pageSize={this.state.pageSize}
onPageChange={this.handlePageChange}
currentPage={this.state.currentPage}
/>
</div>
</div>
)}
else{
return(
<div>
<p>Empty</p>
</div>
)
}
}
}
жанр. js
const i=[
{
id:1,
name:'Comedy'
},
{
id:2,
name:'Horror'
},
{
id:3,
name:'Cartoon'
}
]
let genre=i;
export default genre;