Question

我编写了一个应用程序来使用FlatList显示大数据，但是当我使用该应用程序时，当数据数组为空时，Flatlist不会清除数据。

renderItem = ({item}) => {
        return (
          <TouchableOpacity
            onPress={() => this.props.navigation.navigate('Detail', { item, otherParam: item.Word1})}>
            <View style={{ padding: 5, backgroundColor: '#eee'}}>
              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                <DisplayField value={item.Word1} />
              </View>
              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                <DisplayField value={item.Word2} />
              </View>
              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                <DisplayField value={item.Word3} />
              </View>
              <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                <DisplayField value={item.Word4} />
              </View>
            </View>
          </TouchableOpacity>
        );
      };

这是渲染代码

render() {
    return (
      <View style={styles.container}>
        <SearchBar lightTheme placeholder='Enter your word' onChangeText={this.onChangeTextDelayed} />
        <FlatList style={styles.listContainer}
      data={this.state.data}
      extraData={this.state.data}
      renderItem={this.renderItem}
      keyExtractor={item => item.Word1}
      ItemSeparatorComponent={() => (
        <View
          style={{ height: 1, width: '100%', backgroundColor: '#CED0CE' }}
          />
      )}
      />
      </View>
    );
  }

这是一种数据检索方法

retriveData = (msg) => {
      if(msg === '') {
        this.setState({data:[]});
        return;
      }

      let limStatement = '';
      let sqlStatement = "SELECT Word1, Word2, Word3, Word4 FROM MyTable WHERE Word1 LIKE '%" + msg + "%' ORDER BY lower(Word2)";
      db.runQuery(sqlStatement).then(rows => { this.setState({ data: rows }) });
  }

因此，当我在文本框中键入搜索内容时，Flatlist会正确显示数据，但是当我删除搜索文本时，它将转到this.setState（{data：[]}）以清除状态数据，但它只是发生了一些不见了列表显示示例

A
B
C
D
E
F
G
.
.
.

当我清除搜索内容时，似乎是这样。

B
B
D
D
E
E
F
F
G
G
G

当我向下滚动到很远时会发生。

对此有任何想法吗？

即使数据数组干净，React本机Flatlist数据也不会清除

0 个答案: