1. ホーム
  2. reactjs

[解決済み] フラットリストを再レンダリングするには?

2022-11-29 11:24:18

質問

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

どのように解決するのですか?

を使用します。 extraData プロパティを使用します。

ドキュメントにあるように

を渡すことで extraData={this.state}FlatList を確認します。 FlatList が再描画されるようにします。 state.selected が変更されたときに再描画します。このプロップを設定しない場合 FlatList はアイテムを再レンダリングする必要があることに気づかないでしょう。 PureComponent であり、prop の比較はいかなる変更も示しません。