React Native FlatList搜索过滤时CoinInfo.includes返回undefined问题

问题根因 #

item.CoinInfo 是对象类型，而includes()是字符串/数组的原生方法，对象不存在该方法，调用后返回undefined，导致过滤逻辑失效。

解决方案 #

修改搜索函数的过滤逻辑，指定匹配CoinInfo下的Name和FullName两个字符串字段，同时优化状态更新逻辑、增加大小写不敏感适配：

search = searchText => {
  const formatSearch = searchText.toLowerCase().trim();
  // 搜索内容为空时清空过滤数组，直接展示全量列表
  if (!formatSearch) {
    this.setState({
      searchText: '',
      filteredCryptos: []
    });
    return;
  }
  // 同时匹配币种简称和全称，大小写不敏感
  const filteredCryptos = this.state.cryptos.filter(item => {
    const shortName = item.CoinInfo.Name.toLowerCase();
    const fullName = item.CoinInfo.FullName.toLowerCase();
    return shortName.includes(formatSearch) || fullName.includes(formatSearch);
  });
  // 合并状态更新，减少不必要的重渲染
  this.setState({
    searchText,
    filteredCryptos
  });
};

补充说明 #

你原有FlatList的data判断逻辑无需修改，当过滤结果为空或者搜索内容清空时，会自动回退展示完整的cryptos列表，符合需求。如果需要严格区分大小写搜索，去掉代码中所有的toLowerCase()调用即可。

内容的提问来源于stack exchange，提问作者Frank Boccia