Реагировать на родные элементы FlatList, не меняющиеся в зависимости от состояния - PullRequest
Новая
       5

Реагировать на родные элементы FlatList, не меняющиеся в зависимости от состояния

0 голосов
/ 10 февраля 2019

У меня есть панель поиска, которая обновляет this.state.data, которая заполняет мой FlatList.Когда я набираю что-то вроде tttt в панели поиска ..... this.state.data обновляется до пустого массива .... и console.log, который вы видите ниже console.log('Populating flatview with:' + this.state.data);, показывает, что массив теперь очищен ... однакоFlatList не изменяется, чтобы отразить это.this.state.data определенно меняется на пустой массив, но FlatList не обновляется.

Есть идеи?Заранее спасибо 

  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
    this.arrayholder = [];
  }

this.state.data и this.arrayholder заполнены объектами здесь ..... 

 <SearchBar
    placeholder="Type Here..."
    lightTheme
    round
    onChangeText={text => this.searchFilterFunction(text)}
    autoCorrect={false}
  />

  searchFilterFunction = (text) => {
    const newData = this.arrayholder.filter((item) => {
      const itemData = item.name.toUpperCase();
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({ data: newData });
  };



renderFlatView = () => {
    console.log('Populating flatview with:' + this.state.data);
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={item.title}
              subtitle={item.subtitle}
              avatar={item.avatar}
              containerStyle={{ borderBottomWidth: 0 }}
              onPress={function goes here}
            />
          )}
          keyExtractor={item => item.id}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
          onRefresh={this._handleRefresh}
          refreshing={this.state.refreshing}
          onEndReached={this._handleLoadMore}
          onEndReachedThreshold={0.3}
        />
      </List>
    );
  };

1 Ответ

0 голосов
/ 10 февраля 2019

... понял это.

this._handleLoadMore запускался сразу после того, как состояние было отфильтровано ... и получил еще несколько результатов из API для добавления в состояние

...