開発中の React Native アプリで遭遇した現象についてです。
原因は単なる私のコードミスだったのですが、こんな挙動になるんだ!とちょっと意外だったのでまとめ。
React Native の FlatList を使って、データの一覧を表示していたのですが、このリストを Pull to Refresh
でリロード(リフレッシュ)した際に、データが全て消えず、前のデータが数件だけ残ってしまうという現象が発生しました。
しかも、リロードするたびにその前のデータが増えていくという…。
ちなみに、FlatList のページはこちらです。
記述していたコードはこちら。
<FlatList data={this.state.list} keyExtractor={item => `${item.id}`} renderItem={({ item, index }) => { return (<ListItem data={item} type={item.type} />) }} onRefresh={this.getListData} refreshing={this.state.isRefreshing}
この時、onRefresh={this.getListData}
にリロード時の処理を記述しているのですが、この this.getListData()
関数内では、データ取得前に一旦 list
を空にしているので、前のデータは残らないはずが、そうならず…。
で、リロード処理を実行した時のログを見てみたところ、key
の重複が原因でした!
上記のコードの 3行目の keyExtractor={item => `${item.id}`}
という記述で、FlatList
のキーを指定しているのですが、個々の指定が間違っており、key
が重複してしまっていました。
なお、ログにもきちんとエラーとして表示されていました。
こちらを正しく指定し直したところ、リロードしても前のデータが残るという現象は無くなりました!
結局、エラーログをしっかり見ろ!という結論でした。
私が使っていたアカウントではデータが少なくてこのエラーが発生しなかったので気付くのが遅くなってしまいましたが、無事解決できてよかったです…!
以上、React Native の FlatList をリフレッシュ(リロード)した時に、前のデータが残ってしまう時の対処法についてでした。
みなさんも、key の指定は重複しないように気をつけてください!
ご参考になれば幸いです。