按用户搜索过滤 Flatlist - CoinInfo.includes 返回未定义的 React Native

Question

我正在尝试使用搜索来过滤平面列表。我正在使用来自 react-native-elements 和 react-native 的搜索组件和 FlatList。下面列出的代码：我正在尝试呈现整个平面列表或仅呈现用户搜索文本中过滤后的平面列表。代码如下：

this.state = {
      cryptos: [],
      refreshing: true,
      filteredCryptos: [],
      searchText: '',
    };
<SearchBar
          round={true}
          lightTheme={true}
          placeholder="Search ..."
          placeholderTextColor="#000000"
          autoCorrect={false}
          autoCapitalize={false}
          onChangeText={this.search}
          value={this.state.searchText}
        />
        <FlatList
          data={
            this.state.filteredCryptos && this.state.filteredCryptos.length > 0
              ? this.state.filteredCryptos
              : this.state.cryptos
          }
          renderItem={({item}, index) =>
            item !== null ? (
              <CryptoItem
                key={index}
                crypto={item}
                cryptoDisplay={item.DISPLAY.USD}
                onClick={() => this.onClickSubscription()}
              />
            ) : (
              <ActivityIndicator size="large" />
            )
          }
          keyExtractor={item => item.CoinInfo.Id}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh.bind(this)}
        />

搜索功能

search = searchText => {
    this.setState({searchText: searchText});
    let filteredCryptos = this.state.cryptos.filter(function (item) {
      return item.CoinInfo.includes(searchText);
    });
    this.setState({filteredCryptos: filteredCryptos});
  };

我试图从 API 匹配的数据是 CoinInfo - FullName or Name。

CoinInfo: {Id: '1182', Name: 'BTC', FullName: 'Bitcoin', Internal: 'BTC', ImageUrl: '/media/37746251/btc.png', …}
DISPLAY: {USD: {…}}
RAW: {USD: {…}}

Answer 1

您可能希望在搜索功能中匹配 FullName 或 Name 属性中的文本。

search = searchText => {
  this.setState({searchText: searchText});
  
  // searchText empty, reset filtered array
  if(!searchText){
    this.setState({filteredCryptos: []});
    return;
  }
  
  let filteredCryptos = this.state.cryptos.filter(function (item) {
    
    // Defaults to empty string
    let name = item.CoinInfo ? (item.CoinInfo.FullName || item.CoinInfo.Name || "") : "";
    
    // If no such property, skip
    if(!name) return false
    
    // Change to both to lowercase, as you want to match 'bitcoin' and 'Bitcoin'
    return name.toLowerCase().includes(searchText.toLowerCase());
  });
  this.setState({filteredCryptos: filteredCryptos});
};

Answer 2

将您的搜索字符串和搜索对象都转换为小写字符串并执行此操作，它将起作用。

search = searchText => {
    this.setState({searchText: searchText});
    let filteredCryptos = this.state.cryptos.filter(function (item) {
      let dataString = JSON.stringify(item.CoinInfo).toLowerCase();
      let searchText = searchText.toLowerCase();
      return dataString.includes(searchText);
    });
    this.setState({filteredCryptos: filteredCryptos});
  };

按用户搜索过滤 Flatlist - CoinInfo.includes 返回未定义的 React Native

Filtering Flatlist by User Search - CoinInfo.includes comes back undefined React Native

search

filter

react-native