如何重新渲染平面列表？

Question

与 ListView 不同，我们可以更新 this.state.datasource。是否有任何方法或示例来更新 FlatList 或重新渲染它？

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

 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} />

原文由 shalonteoh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

正如文档所述：

通过将 extraData={this.state} 传递给 FlatList 我们确保 FlatList 将在 state.selected 更改时重新呈现自己如果不设置此道具， FlatList 不会知道它需要重新渲染任何项目，因为它也是一个 PureComponent 并且道具比较不会显示任何更改。

原文由 ED209 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于快速简单的解决方案，请尝试：

1. 将额外数据设置为布尔值。

   extraData={this.state.refresh}

2. 当你想重新渲染/刷新列表时切换布尔状态的值

   this.setState({
       refresh: !this.state.refresh
   })

原文由 Hradesh Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议