[解決済み] フラットリストを再レンダリングするには?
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 の比較はいかなる変更も示しません。
関連
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】Typescript react - モジュール ''react-materialize'' の宣言ファイルが見つかりませんでした。'path/to/module-name.js' は暗黙のうちに any 型を持ちます。
-
[解決済み】React Propsが定義されていません。
-
[解決済み] react - createMuiThemeとcreateThemeの違い。
-
[解決済み] React + TypeScript のエラーです。この呼び出しにマッチするオーバーロードがありません
-
[解決済み] React-Router 4 キャッチオールルート
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] Reactでグローバル変数を宣言する方法とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Warning.Itが表示されるのはなぜですか?Functions are not valid as a React child?
-
[解決済み】React Propsが定義されていません。
-
[解決済み] useStateプロパティのフックにmap関数を使用する方法
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] 'Proptypes'が定義されていない
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] React JSでは、状態を直接変異させない、setState() react/no-direct-mutation-stateを使用する。
-
[解決済み] ReactJs "インバリアント違反..." リアクトの古典的な問題
-
[解決済み] アクシオスは定義されていません