时间戳

首页 > 解决方案 > 反应中的过滤方法没有过滤出正确的结果

reactjs - 反应中的过滤方法没有过滤出正确的结果

问题描述

更新：

我正在尝试构建一个过滤器组件作为列表组组件，它将根据“流派”过滤电影列表。之后，我将过滤后的数组传递给分页组件。I am not getting an error currently, but on when a genre is selected the filter array isn't showing any result which means something is wrong within the filtered variable.

电影.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;

标签： reactjsecmascript-6

解决方案

有几个错误要修复。

const filtered=this.state.selectedGenre
 ? this.state.movies.filter(i=>(
    i.this.state.movies.id===this.selectedGenre.id
    )):

  1. this.selectedGenre.id应该是 this.state.selectedGenre.id

  2. i.this.state.movies.id===this.selectedGenre.id应该i.id===this.selectedGenre.id

  3. 另请注意，在状态 selectedGenre 是一个数组。您无法读取带有 selectedGenre.id 的数组。也许将其转换为对象。

推荐阅读