如何重新渲染平面列表? [英] How to re-render flatlist?

问题描述

与 ListView 不同，我们可以更新 this.state.datasource.有没有更新 FlatList 或重新渲染它的方法或示例?

Unlike ListView we can update this.state.datasource. Is there any method or example to update FlatList or re-render it?

我的目标是在用户按下按钮时更新文本值...

My goal is to update the text value when user press button ...

renderEntries({ item, index }) {
    return(
        <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})>
             <Text>{this.state.data[index].value}</Text>
        </TouchableHighlight>
    )
}

<FlatList 
    ref={(ref) => { this.list = ref; }} 
    keyExtractor={(item) => item.entry.entryId} 
    data={this.state.data} 
    renderItem={this.renderEntries.bind(this)} 
    horizontal={false} />

推荐答案

在您的 FlatList 组件上使用 extraData 属性.

Use the extraData property on your FlatList component.

如文档所述:

通过将 extraData={this.state} 传递给 FlatList，我们确保 FlatList 将在 state.selected 变化.如果没有设置这个 prop，FlatList 不会知道它需要重新渲染任何项目，因为它也是一个 PureComponent 并且 prop 比较不会显示任何变化.

By passing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

这篇关于如何重新渲染平面列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！