開発中の 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 の指定は重複しないように気をつけてください!
ご参考になれば幸いです。