BETA

ReactNativeのFlatListで更新がうまく反映されないときの話

投稿日:2019-02-21
最終更新:2019-02-21

環境

  • ReactNative <= 56.4 くらいまでで発生
  • iosでよく起こる気がする
  • 渡すデータにkeyプロパティを含まず(含んでてもいいけど)keyExtractor propsでkeyを制御

現象

FlatListに渡すデータを更新しても、描画が更新されなかったり更新がワンテンポ遅かったりする

原因

NativeComponentがデータをキャッシュしてて更新をうまくキャッチできないらしい

対策

そもそも更新されないとき

extraData propsにlastUpdateなどを渡してデータ更新と一緒に時刻を更新したりするとよい

ワンテンポ遅れる時

iosでよく起こる気がするが、画像やTextImputの入力値などが更新前の参照先を表示したままだったりする。
原因は、keyExtractor={(v,k)=>''+k}※としていたためデータ更新後も同じkeyが上から順に振られてしまい、キャッシュしたデータを優先して描画してしまっていた(renderItemに含めた子ComponentだかNativeComponentだかの更新が行われなかった)。
上記のようなk(並び順)ベースではなくデータidベースで描画する場合、keyExtractor={(v,k)=>''+v.id}といったように変更するべき。

※ ‘’+はNumber=>Stringのキャスト.keyにNumber型を渡すと怒られる

つまり

こんな感じ

<FlatList  
  data={this.props.value}  
  extraData={this.state.lastUpdate} // データ更新時に一緒に更新  
  keyExtractor={(v,k)=>''+v.id} // データに対して一意に.  
  renderItem={  
    ({item,index})=>{  
      return (  
        <View style={style.listContainer}>  
          <Text style={style.context}}>{item.title}</Text>  
          <Text style={style.context}}>{item.context}</Text>  
        </View>  
      )  
    }  
  }  
/>;
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@divrots0の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう