Javascript 基于React中不同字段的不同文本输入进行过滤

我试图根据文本字段过滤卡片，这些文本字段可能是空的，也可能是填的，如果它们已经填好了，那么我想过滤掉所有不包含该字符串的内容

例如，如果我只想按标题“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;

}

filterMusicLibrary（）{
让musicLibraryItems=[]；
this.state.musicGet.map（music=>{
如果（音乐.标题）{
if（music.title.includes（this.state.title））{
musicLibraryItems.push(
);
}
}
if（音乐、作曲家）{
if（music.composer.includes（this.state.composer））{
musicLibraryItems.push(
);
}
}
if（音乐编曲）{
if（music.arranger.includes（this.state.arranger））{
musicLibraryItems.push(
);
}
}
if（音乐、乐器）{
if（音乐.乐器.包括（本状态.乐器））{
musicLibraryItems.push(
);
}
}
});
musicLibraryItems=[…新设置（musicLibraryItems）]
返回musicLibraryItems；
}

---

我把所有东西都推到一个

musicLibraryItems

数组中，然后我希望通过使用ES6中的Set变量类型来获得唯一的值，但它没有按预期工作，这种方式效率也非常低，我想知道是否有人能帮我找到解决方案

使用

集合

不起作用，因为所有项目都是唯一的对象，但由于

MusicLibraryItem

组件对于每种情况都是相同的，因此可以使用

过滤器

非常优雅地表达这一点：

filterMusicLibrary() {
  const filteredMusicItems = this.state.musicGet.filter((music) =>
    (!this.state.title || music.title && music.title.includes(this.state.title)) &&
    (!this.state.composer || music.composer && music.composer.includes(this.state.composer)) &&
    (!this.state.arranger || music.arranger && music.arranger.includes(this.state.arranger)) &&
    (!this.state.instrumentation || music.instrumentation && music.instrumentation.includes(this.state.instrumentation))
  );
  return filteredMusicItems.map((music) =>
    <MusicLibraryItem key={music.id} music={music} history={this.props.history}/>
  );
}

filterMusicLibrary（）{
const filteredmusic=this.state.musicGet.filter（（音乐）=>
（！this.state.title | | music.title&&music.title.includes（this.state.title））&&
（！this.state.composer | | music.composer&&music.composer.includes（this.state.composer））&&
（！this.state.arranger | | music.arranger&&music.arranger.includes（this.state.arranger））&&
（！this.state.instrumentation | | music.instrumentation&&music.instrumentation.includes（this.state.instrumentation））
);
返回filteredMusicItems.map（（音乐）=>
);
}

这没有正确过滤出任何项目，它唯一能够过滤掉的是一个将arranger和instrumentation作为空值的项目，尽管它在只过滤一个文本字段时确实有效。是的，我基于代码（基本上是一个或过滤器），而不是您的描述。我已经更新了一个和过滤器的答案。非常感谢，所有的布尔逻辑让我更加困惑，你为我节省了很多时间！