我有一个搜索栏,可以更新提供给我FlatList的this.state.data。当我在SearchBar中输入类似tttt的内容时……this.state.data被更新为一个空的array....and,您在console.log('Populating flatview with:' + this.state.data);下面看到的console.log显示该数组现在是emptied...however,而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>
);
};发布于 2019-02-10 10:04:18
把它...figured出来。
filtered...and从应用编程接口获取更多结果以添加到状态后,立即触发this._handleLoadMore
https://stackoverflow.com/questions/54612608
复制相似问题