根据React

Question

我正在尝试根据可能为空或可填写的文本字段过滤卡片，如果填写完毕，那么我想过滤掉不包含该字符串的所有内容。

例如，如果我只是想通过标题“Test”进行过滤，我只会在标题输入框中添加一些东西，但如果我想通过标题和作曲家进行过滤，我会填写两个文本字段并且仅填写将显示与两个文本字段匹配的卡片。

目前我正在努力做到如下：

filterMusicLibrary() {
    let musicLibraryItems = [];
    this.state.musicGet.map(music => {
        if(music.title) {
            if(music.title.includes(this.state.title) ) {
                musicLibraryItems.push(
                    <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
                );
            }
        }
        if(music.composer) {
            if(music.composer.includes(this.state.composer) ) {
                musicLibraryItems.push(
                    <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
                );
            }
        }
        if(music.arranger) {
            if(music.arranger.includes(this.state.arranger) ) {
                musicLibraryItems.push(
                    <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
                );
            }
        }
        if(music.instrumentation) {
            if(music.instrumentation.includes(this.state.instrumentation) ) {
                musicLibraryItems.push(
                    <MusicLibraryItem key= {music.id} music={music} history={this.props.history}/>
                );
            }
        }



    });

    musicLibraryItems = [..new Set(musicLibraryItems)]
    return musicLibraryItems;

}

我正在将所有内容推送到musicLibraryItems数组，然后我希望通过使用ES6中的Set变量类型来获取唯一值，但它无法按预期工作，这种方式也非常低效且我想知道是否有人可以帮我找到解决方案。

Answer 1

使用Set不会起作用，因为所有项目都是唯一对象，但由于MusicLibraryItem组件对于每种情况都是相同的，因此您可以使用{{1 }}：

filter