React Native中如何同时按Nome和Citta筛选JSON对象？

你目前的搜索逻辑只针对Nome字段做匹配，要扩展成同时支持Citta字段的话，只需要调整筛选条件，让搜索文本能匹配两个字段中的任意一个就行，很简单～

先回顾下你的现有代码：

SearchFilterFunction(text){ 
  newData = this.arrayholder.filter(function(item){ 
    itemdata= item.Nome.toUpperCase(), 
    textData = text.toUpperCase() 
    return itemdata.indexOf(textData) > -1 
  }) 
  this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(newData), 
    text: text 
  }) 
}

以及对应的JSON数据结构：

[
  {
    "Citta": "Milano",
    "Data": "9/08/2018 ",
    "Foto": "x",
    "Nome": "Musica pop",
    "Ora": "18:30:00"
  },
  {
    "Citta": "Ancona",
    "Data": "9/05/2018",
    "Foto": "x",
    "Nome": "Food porn",
    "Ora": "21:30:00"
  },
  {
    "Citta": "miami",
    "Data": "12/12/2018",
    "Foto": "x",
    "Nome": "musica jazz",
    "Ora": "21:30:00"
  }
]

修改后的代码 #

我调整了筛选逻辑，同时处理Nome和Citta字段，还做了一点小优化（比如只转换一次搜索文本的大小写）：

SearchFilterFunction(text){ 
  // 先把搜索文本转大写，只做一次提升效率
  const textData = text.toUpperCase();
  // 筛选同时匹配Nome或Citta的条目
  const newData = this.arrayholder.filter(item => { 
    const nomeText = item.Nome.toUpperCase();
    const cittaText = item.Citta.toUpperCase();
    // 只要任意一个字段包含搜索文本，就保留该条目
    return nomeText.indexOf(textData) > -1 || cittaText.indexOf(textData) > -1;
  }); 
  this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(newData), 
    text: text 
  }); 
}

逻辑说明 #

1. 大小写统一：把搜索文本和两个字段都转成大写，保证搜索是大小写不敏感的（比如搜索"miami"或"MIAMI"都能匹配到第三个条目）
2. 多字段匹配：用||逻辑或判断，只要搜索文本出现在Nome或者Citta的内容里，就把这个条目保留下来
3. 性能优化：把搜索文本的大小写转换提到循环外面，避免在每个条目里重复执行，小细节但能提升一点效率

如果担心字段可能为空（比如某个条目没有Nome或Citta），可以加个空值兜底，比如(item.Nome || '').toUpperCase()，避免出现Cannot read property 'toUpperCase' of undefined的错误，不过看你的示例数据里字段都是有值的，这个可以根据实际情况选择添加。

内容的提问来源于stack exchange，提问作者Miriam D'aloia