javascript - 如何使用 React Native ListView 高效搜索数据

Question

我正在尝试实现一个过滤器和搜索功能，该功能允许用户输入关键字并返回结果(数组)并重新呈现行

这是传入 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 的语法是错误的...它应该采取一个回调，该回调将是正在评估过滤的项目..如果您返回 true 它将保留它。

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

你甚至可以使内联像..

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

要了解我对 ~ 的使用，请阅读 The Great Mystery of the Tilde .

由于filter返回一个新数组，您应该能够用它克隆您的数据源。如果您没有使用filter，则必须调用events.slice()来返回一个新数组。否则，ListView 不会接收更改。