反应本机FlatList项目不随状态变化

Question

I have a search bar that updates this.state.data which feeds my FlatList. When I type something like tttt in the SearchBar..... this.state.data is updated to an empty array....and the console.log you see below console.log('Populating flatview with:' + this.state.data); shows that the array is now emptied...however the FlatList does not change to reflect this. this.state.data is definitely changing to an empty array but the FlatList is not refreshing.

Any ideas? Thanks in advance

  constructor(props) {
    super(props);

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

this.state.data and this.arrayholder get populated with objects here.....

 <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>
    );
  };

Answer 1

...figured it out.

this._handleLoadMore was firing immediately after state was filtered...and fetched a bunch more results from the API to add to state