Question

我正在将FlatList与ListHeaderComponent一起使用。

<FlatList
        data={this.state[this.feeds].edges}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        onEndReached={this.onFetchFeeds}
        onRefresh={this.onRefresh}
        refreshing={this.state.isRefreshing}
        ListHeaderComponent={this.renderBody}

      />

我制作了一个渲染ListHeaderComponent。

renderBody = () => {
                  if (this.props.body)
                    return this.props.body;

this.props.body由上级组件提供。

<Feeds
    body={<View>
            { this.state.suggestions.slice(0, 3).map((channel, index) =>
                                                <ChannelSlot key={index} {...channel}/>)}
            { this.state.suggestions.length > 3 && !this.state.seeMore ?
            <TouchableOpacity onPress={() => this.setState({seeMore: true})}>
                <Text style={styles.moreButton}>See More</Text>
            </TouchableOpacity> : null}
            { this.state.seeMore && this.state.suggestions.slice(3, 15).map((channel, index) => <ChannelSlot key={index} {...channel}/>)}
    </View>}
/>

问题是即使this.state.seeMore发生更改，交付给主体的组件也不会重新呈现。它仅在FlatList上完成“拉动刷新”时才重新渲染。然后更新。我的代码有什么问题？

Answer 1

由于您正在为ListHeaderComponent使用函数，因此即使该函数的返回值可能不同，该prop的值也不会改变。因此FlatList不知道要重新渲染。调用render函数生成一个渲染元素，因此renderBody()返回值的任何更改都将导致FlatList标头的重新渲染。

<FlatList
        ...
        // note the function call here instead of passing the function itself
        ListHeaderComponent={this.renderBody()}

      />

状态更改时，ListHeaderComponent不会重新呈现

1 个答案: