Как эффективно искать данные с 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 ... он должен выполнить обратный вызов, который будет оцениваться для фильтрации. Если вы вернете истину, он сохранит его.

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 не будет получать изменения.