reactjs - 从多选器（ReactJS、TypeScript）中删除项目时，搜索结果未显示默认列表

Question

为什么当我选择流派过滤器然后从列表中删除所有流派时过滤器没有显示正确的结果。当我将第一个流派添加到过滤器时，问题就开始了，它不会自动过滤掉它们，只有当我添加了第二个流派时。我注意到的另一个问题是从过滤器列表中删除流派时的事实。结果不会根据选择的流派进行更新。

例如，我首先添加流行音乐，然后添加摇滚（在流派过滤器中，数组将是['pop', 'rock']并且仅在将第二种流派添加到数组时才会显示一些特定结果。此外，当删除所有流派时...... .它仍然没有显示所有内容（默认为500个对象的数组。我怎样才能重写函数以便正确解决这个问题。事实上，当一些过滤器被填充或应用时，它应该立即更新搜索结果onChange。

为了您更好地理解，我建议您单击下面的链接以查看大图。

链接到代码沙盒上的搜索结果组件

import React from "react";
import { connect, ConnectedProps } from "react-redux";

interface Genre {
    id: number;
    name: string;
  }
  
  interface Video {
    id: number;
    artist: string;
    title: string;
    release_year: number;
    genre_id: number;
    image_url: string;
  }
  
interface IProps {
    genreList?: Genre[];
    videoList?: Video[];
    selectedGenres?: any;
    inputValue?: string;
    selectedYear?: number;
}

export const SearchResult: React.FC<SearchResultProps | IProps> = ({videoList, inputValue, selectedGenres, selectedYear}) => {
    const filterRequirements = (data: { release_year: any; artist: any; title: any; genre_id: any; }) => { 
    return (selectedYear == null || selectedYear == 0 || data.release_year == selectedYear)
            && (inputValue.trim() == '' || data.artist.toLowerCase().includes(inputValue.toLowerCase()) || data.title.toString().toLowerCase().includes(inputValue.toLowerCase()))
            && (selectedGenres.length == 0 || selectedGenres.includes(data.genre_id));
    }
    
    const filteredVideos = videoList.filter(filterRequirements);

    return (
        <div>{filteredVideos.map((item: { title: string; }, index: number) => (
            <div key={index}>{item.title}</div>
        ))}</div>
    )
}

const mapStateToProps = (state: any) => {
    return {
        inputValue: state.videoList.inputValue || "",
        genreList: state.videoList.genreList || [],
        videoList: state.videoList.videoList || [],
        selectedGenres: state.videoList.getGenresId || [],
        selectedYear: state.videoList.selectedYear || []
    };
}

const connector = connect(mapStateToProps);
type SearchResultProps = ConnectedProps<typeof connector>;
export default connector(SearchResult);

标签： reactjstypescript