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返回一个新数组，您应该可以使用它来克隆dataSource。如果您没有使用filter，则必须致电events.slice()以返回新数组。否则，ListView不会拾取更改。

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

1 个答案: