首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React原生FlatList项不随状态变化

React原生FlatList项不随状态变化
EN

Stack Overflow用户
提问于 2019-02-10 09:43:59
回答 1查看 128关注 0票数 0

我有一个搜索栏,可以更新提供给我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不会刷新。

有什么想法吗?提前感谢

代码语言:javascript
运行
复制
  constructor(props) {
    super(props);

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

在这里使用对象填充this.state.data和this.arrayholder .

代码语言:javascript
运行
复制
 <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>
    );
  };
EN

回答 1

Stack Overflow用户

发布于 2019-02-10 10:04:18

把它...figured出来。

filtered...and从应用编程接口获取更多结果以添加到状态后,立即触发this._handleLoadMore

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54612608

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档