Блог

Главная - Вопросы по программированию - Результат поиска не показывает список по умолчанию при удалении элемента из мультиселектора (ReactJS, машинопись)

Результат поиска не показывает список по умолчанию при удалении элемента из мультиселектора (ReactJS, машинопись)

#reactjs #typescript

Вопрос:

Почему фильтр не показывает должного результата, когда я выбираю жанровый фильтр, а затем удаляю все жанры из списка. Проблема начинается, когда я добавляю первый жанр в фильтр, он не будет автоматически отфильтровывать их, только когда я добавлю второй. Еще одна проблема, которую я заметил, заключается в том, что при удалении жанров из списка фильтров. Результат не обновляется на основе выбора жанров.

Например, я сначала добавляю pop, а затем второй рок (массив будет [‘pop’, ‘rock’] в жанровом фильтре, и он показывает определенный результат только при добавлении второго жанра в массив. Также при удалении всех genres….it по-прежнему отображается не все (массив из 500 объектов по умолчанию. Как я могу переписать функцию, чтобы эта проблема была решена правильно. На самом деле, когда некоторые фильтры заполнены или применены, он должен немедленно обновить результат поиска при обмене.

Для вашего лучшего понимания я рекомендую вам перейти по ссылке ниже, чтобы увидеть общую картину.

Ссылка на компонент результатов поиска в codesandbox 

 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)
            amp;amp; (inputValue.trim() == '' || data.artist.toLowerCase().includes(inputValue.toLowerCase()) || data.title.toString().toLowerCase().includes(inputValue.toLowerCase()))
            amp;amp; (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);
Метки: ,