如何使用React Native ListView有效地搜索數據

Question

我正在嘗試實現過濾器和搜索功能，該功能將允許用戶鍵入關鍵字並返回result（array）並重新呈現該行

這是傳遞給createDataSource函數的事件數組

我現在遇到的問題是我的搜索功能無法執行過濾，盡管我專門返回了索引對象，但將返回整個父對象。

這是我到目前為止所得到的

class Search extends Component {

  state = { isRefreshing: false, searchText: '' }

  componentWillMount() {
    this.createDataSource(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.createDataSource(nextProps);
    if (nextProps) {
      this.setState({ isRefreshing: false })
    }
  }

  createDataSource({ events }) {
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    this.dataSource = ds.cloneWithRows(events);
  }

  //return arrays of event from events
  renderRow(event) {
    return <EventItem event={event} />;
  }

  onRefresh = () => {
    this.setState({ isRefreshing: true });
    this.props.pullEventData()
  }

  setSearchText(event) {
   let searchText = event.nativeEvent.text;
   this.setState({ searchText })

   var eventLength = this.props.events.length
   var events = this.props.events

   const filteredEvents = this.props.events.filter(search)
   console.log(filteredEvents);

   function search() {
     for (var i = 0; i < eventLength; i++) {
       if (events[i].title === searchText) {
         console.log(events[i].title)
         return events[i];
       }
     }
   }
  }

  render() {
    const { skeleton, centerEverything, container, listViewContainer, makeItTop,
    textContainer, titleContainer, descContainer, title, desc, listContainer } = styles;

    return(
      <View style={[container, centerEverything]}>
        <TextInput
           style={styles.searchBar}
           value={this.state.searchText}
           onChange={this.setSearchText.bind(this)}
           placeholder="Search" />
        <ListView
          contentContainerStyle={styles.listViewContainer}
          enableEmptySections
          dataSource={this.dataSource}
          renderRow={this.renderRow}
          refreshControl={
            <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this.onRefresh}
              title="Loading data..."
              progressBackgroundColor="#ffff00"
            />
          }
        />
      </View>
    )
  }
}

從上圖可以看到，我的代碼要求我鍵入完整的查詢文本以顯示結果。 它顯示所有七個數組對象？ 為什么？

Answer 1

Array.prototype.filter的語法是錯誤的……它應該接受一個回調，該回調將被評估為要過濾的項目。

function search(event) {
  return ~event.title.indexOf(searchText)
}

您甚至可以使內聯像..

const filteredEvents = this.props.events.filter(event => ~event.title.indexOf(searchText))

為了了解~用法，請閱讀《蒂爾德的偉大奧秘》 。

由於filter返回一個新數組，因此您應該能夠使用它克隆dataSource。 如果不使用filter ，則必須調用events.slice()返回一個新數組。 否則，ListView不會獲取更改。