我有一个FlatList,它接收一个项目数组。当我滚动到底部时,我会将更多的项目添加到该数组的末尾并显示给用户。
问题是每个项目在我们添加到项目数组时都会被渲染,有时甚至会被渲染两次。
这里简化了代码。/r/reactnative无法回答这个问题。
constructor(props) {
super(props);
this.state = {itemsTest: ['A', 'A', 'A', 'A']}
}
render() {
// Key is fine, since none of my items are changing indexes. I am just adding new items.
return (
<FlatList
keyExtractor={(item,index) => index}
scroll
data={this.state.itemsTest}
renderItem={({item, index}) => <View style={{width: windowWidth}}><Text>{item}</Text></View>
onEndReached={() => this.nextItemsTest()}
onEndReachedThreshold={0.2}
</FlatList>
)
}
nextItemsTest() {
// From suggestions below, just add an element to this array.
console.log('nextItemsTest');
const x = ['A'];
// Have worked with many variations of setting state here. I don't think this is the issue.
this.setState((prevState) => ({itemsTest: [...prevState.itemsTest, ...x],}));}
这是输出结果。每当我的状态被设置时,每个单独的项目都会重新渲染(甚至两次)。
我只想重新渲染没有改变的项目。谢谢。