基于不同文本输入对 React 中不同字段的过滤

debugcn 发表于 Dev

特拉布尔

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

例如，如果我只想按标题“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 变量类型来获取唯一值，但它未能按预期工作，这种方式也非常低效，我想知道是否有人可以帮我找到一个解法。

奥布罗西斯

使用 aSet不会起作用，因为所有项目都将是唯一的对象，但由于MusicLibraryItem每种情况的组件都相同，您可以使用 a 非常优雅地表达这一点filter：

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}/>
  );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。