【React Native】FlatListをリフレッシュした時にデータが残ってしまう

開発中の React Native アプリで遭遇した現象についてです。
原因は単なる私のコードミスだったのですが、こんな挙動になるんだ!とちょっと意外だったのでまとめ。

 

React Native の FlatList を使って、データの一覧を表示していたのですが、このリストを Pull to Refresh でリロード(リフレッシュ)した際に、データが全て消えず、前のデータが数件だけ残ってしまうという現象が発生しました。
しかも、リロードするたびにその前のデータが増えていくという…。
ちなみに、FlatList のページはこちらです。

FlatList・React Native
https://reactnative.dev/docs/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 の指定は重複しないように気をつけてください!
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG