React Native Flatlist ListHeaderComponent 未在 state 更改上呈現

Question

我有帶有 ListHeaderComponent 的 Flatlist。 當 state 更新時，ListHeaderComponent 不會更新。 任何建議都會有所幫助。

                    <Animated.FlatList data={this.props.store.homeStore.formattedEspeciallyProducts}
                        contentContainerStyle={styles.flatList}
                        ref={(ref) => this.flatList = ref}
                        onScroll={
                            Animated.event(
                                [{nativeEvent: {contentOffset: {y: this.scrollY}}}], 
                                {
                                    useNativeDriver: true
                                }
                            )
                        }
                        renderItem={({ item, index }) => {
                            return(
                                <SpecialProduct product={item} even={(index + 1) % 2 === 0}/>
                            )
                        }}    
                        showsVerticalScrollIndicator={false}
                        keyExtractor={item => item.id}
                        numColumns={2}
                        onEndReached={this._onEndReached}
                        onEndReachedThreshold={0.5}
                        ItemSeparatorComponent={this._itemSeparatorComponent}
                        removeClippedSubviews={true}
                        columnWrapperStyle={{paddingHorizontal: 15}}
                        extraData={language}
                        ListHeaderComponent={
                            <View style={CssHelper['flex']}>
                                <View style={styles.top}>

Answer 1

由於 Flatlist 是一個PureComponent ，它不會在 state 更改時重新呈現。 將您的 state 傳遞給data屬性以實現 state 感知https://reactnative.dev/docs/flatlist#data