FlatList不会重新渲染所有元素

Question

我正在尝试按字符串过滤数据。首先，FlatList呈现正确的数据，在键入我的字符串后也正在呈现正确的数据，但如果我正在尝试删除字符串并让它为空，则应用程序仅渲染前2个元素。

// Search function
updateSearchQuery(query) {
    this.setState({ query });
    const { data } = this.state;

    const filtredData = data.filter((item) => {
        const itemData = item.title.toUpperCase();
        const queryData = query.toUpperCase();
        return itemData.indexOf(queryData) > -1;
    });

    if (this.state.query !== '') this.setState({ filtredData });
    else this.setState({ filtredData: null });
}

// Home
<ScrollView>
    <Container>
        {error && <Text>Error</Text>}
        {loading && <ActivityIndicator animating size="large" />}
        {data !== null && (
            <ItemsList
                data={filtredData !== null ? filtredData : data}
                renderHeader={this.renderHeader}
                navigation={this.props.navigation}
                page="Item"
            />
        )}
    </Container>
</ScrollView>

// Items List
<List>
    <FlatList
        data={data}
        extraData={this.props}
        renderItem={({ item }) => (
            <ListItem onPress={() => this.props.navigation.navigate(page, item)}>
                <Item data={item} />
            </ListItem>
        )}
        keyExtractor={item => item.title}
        ItemSeparatorComponent={this.renderSeparator}
        ListFooterComponent={this.renderFooter}
        ListHeaderComponent={renderHeader}
        refreshing={refreshing}
        onEndReached={this.handleLoadMore}
        onEndReachedThreshold={0.5}
        initialNumToRender={10}
    />
</List>