web-dev-qa-db-ja.com

フラットリストを再レンダリングする方法

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} />
reactjsreact-nativereact-native-flatlist
57
shalonteoh

FlatListコンポーネントのextraDataプロパティを使用します。

ドキュメントが述べているように：

extraData={this.state}をFlatListに渡すことで、state.selectedが変更されたときにFlatList自体が再レンダリングされるようにします。この小道具を設定しないと、FlatListもアイテムを再レンダリングする必要があることを認識しません。これはPureComponentでもあり、小道具の比較では変更が表示されないためです。

125
ED209

すばやく簡単な解決策

  1. 追加データをブール値に設定します。

    extraData = {this.state.refresh}

  2. リストを再レンダリング/リフレッシュしたいときにブール状態の値を切り替えます

    this.setState({ 
    refresh: !this.state.refresh
})
24
Hradesh Kumar

ああそれは簡単です、ちょうどextraDataを使用してください

裏側で追加データが機能する方法は、FlatListまたはVirtualisedListです。 - ）通常のonComponentWillReceivePropsメソッドで オブジェクトが変更されたかどうか をチェックするだけです。

だからあなたがしなければならないのはあなたがextraDataに変わる何かを与えることを確認することだけです。

これが私のやり方です。

immutable.js を使っているので、見たいものがすべて含まれているMap（immutable object）を渡すだけです。

<FlatList
    data={this.state.calendarMonths}
    extraData={Map({
        foo: this.props.foo,
        bar: this.props.bar
    })}
    renderItem={({ item })=>((
        <CustomComponentRow
            item={item}
            foo={this.props.foo}
            bar={this.props.bar}
        />
    ))}
/>

このように、this.props.fooまたはthis.props.barが変更されると、不変オブジェクトは前のオブジェクトとは異なるため、CustomComponentRowが更新されます。

14
SudoPlz

Buttonを作成する予定の場合は、onPress内のsetStateを使用してデータを更新できます。 SetStateはFlatListを再描画します。

4
WilliamC

私は、FlatListにデータプロップの外側でデータの変更を知らせたいのであれば、それをextraDataに設定する必要があることを発見しました。

<FlatList data={...} extraData={this.state} .../>

参照してください： https://facebook.github.io/react-native/docs/flatlist#extradata

4
Mahdi Bashirpour

extraData={this.state}を追加することで、この問題を解決しました。詳細については、以下のコードを確認してください。

render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.arr}
          extraData={this.state}
          renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        />
      </View>
    );
  }
2
nawaab saab

たくさんの本当の答えを探して探した結果、ようやく答えが出ました。

       <FlatList
      data={this.state.data}
      renderItem={this.renderItem}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      ItemSeparatorComponent={this.renderSeparator}
      refreshing={this.state.refreshing}
      onRefresh={this.handleRefresh}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={1}
      extraData={this.state.data}
      removeClippedSubviews={true}
      **keyExtractor={ (item, index) => index }**
              />
    .....

私の主な問題は（KeyExtractor）私はこのようにそれを使用していませんでした。動作していません：keyExtractor = {（item）=> item.ID}私はこれに変更した後それは魅力のように働いた私はこれが誰かに役立つことを願っています。

1
ramin azadi

あなたのやりとりによって変更される変数をextraDataに置いてください。

あなたは創造的になることができます。

たとえば、チェックボックスが付いた変更リストを扱っているとします。

<FlatList
      data={this.state.data.items}
      extraData={this.state.data.items.length * (this.state.data.done.length + 1) }
      renderItem={({item}) => <View>
0
goodhyun

ただ使用してください：

onRefresh={true}

flatListコンポーネントの中。

0
Taha khozooie

私にとっては、トリックはextraDataで、もう1度itemコンポーネントを掘り下げることでした。

state = {
  uniqueValue: 0
}

<FlatList
  keyExtractor={(item, index) => item + index}
  data={this.props.photos}
  renderItem={this.renderItem}
  ItemSeparatorComponent={this.renderSeparator}
/>

renderItem = (item) => {
  if(item.item.selected) {
    return ( <Button onPress={this.itemPressed.bind(this, item)}>Selected</Button> );
  }
  return ( <Button onPress={this.itemPressed.bind(this, item)}>Not selected</Button>);
}

itemPressed (item) {
  this.props.photos.map((img, i) => {
    if(i === item.index) {
      if(img['selected') {
        delete img.selected;
      } else {
        img['selected'] = true;
      }
      this.setState({ uniqueValue: this.state.uniqueValue +1 });
    }
  }
}
0
Dazzle

FlatListをSectionListに置き換えましたが、状態が変わると正しく更新されます。

<SectionList
  keyExtractor={(item) => item.entry.entryId} 
  sections={section}
  renderItem={this.renderEntries.bind(this)}
  renderSectionHeader={() => null}
/>

留意すべき唯一のことはsectionがdiff構造を持つことです。

const section = [{
  id: 0,
  data: this.state.data,
}]
0
Jamland

FlatListにknowデータの変更propとstateの両方にしたい場合は、propとstateの両方を参照するオブジェクトを作成して、flatlistを更新します。

const hasPropOrStateChange = { propKeyToWatch: this.props, ...this.state};
<FlatList data={...} extraData={this.hasPropOrStateChange} .../>

ドキュメント： https://facebook.github.io/react-native/docs/flatlist#extradata

0
Yogaraj Saravanan