附加新数据后FlatList奇怪的行为-多次自动滚动

Question

我有一个显示帖子提要的数据列表，每当用户滚动时，该列表就会自动上下滚动多次，这会导致非常糟糕的用户体验

尝试了此处提供的解决方法： https://stackoverflow.com/questions/43611485/prevent-flatlist-from-scrolling-when-new-items-are-added#= 但这似乎对我不起作用。

<FlatList
                        keyboardDismissMode = 'on-drag'
                        keyboardShouldPersistTaps = 'always'
                        getItemLayout={(data, index) => (
                        {length: 575, offset: 575 * index, index}
                    )}
                        onScroll = {(event) => {
                            this.flatListOffset = event.nativeEvent.contentOffset.y
                            this.setState({
                                scrollOffset: event.nativeEvent.contentOffset.y
                            })
                        }}
                        contentContainerStyle={{
                            flexGrow: 1,
                            width: Dimensions.get('window').width
                        }}
                        refreshControl={
                            <RefreshControl
                                progressViewOffset={120}
                                refreshing={this.state.refreshing}
                                onRefresh={this._onRefresh.bind(this)}
                            />
                        }
                        ref={(feedView) => (this.feedView = feedView)}
                        data={this.state.feed}
                        onEndReached={() => {
                            if (this.state.hasNextPage && !this.state.loadingMore) {
                                    this.paginateFeed()
                            }
                        }}
                        ListHeaderComponent={this._renderCirclesBar}
                        ListEmptyComponent={this._renderEmptyState}
                        ListFooterComponent={() =>
                            !this.state.loadingMore ? null : (
                                <ActivityIndicator color="#2962FF" size="large" />
                            )
                        }
                        keyExtractor={this._keyExtractor}
                        renderItem={this._renderItem}

                    />

然后在某个时候：

this.setState({ feed: this.state.feed.concat(....) })

解释问题的GIF： https://gifyu.com/image/9gDD

Answer 1

用于渲染的用户PureComponent并在平面列表中设置prop disableVirtualization = {true}