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

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} />

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

ドキュメントに記載されているように：

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

迅速で簡単な解決策については、以下を試してください。

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

   extraData = {this.state.refresh}

2. リストを再レンダリング/更新する場合は、ブール状態の値を切り替えます

   this.setState({ 
       refresh: !this.state.refresh
   })
   

ああ、それは簡単です、ただ使うだけです extraData

追加データが舞台裏でどのように機能するかは、FlatListまたはVirtualisedListが、オブジェクトが通常のonComponentWillReceivePropsメソッドで変更されたかどうかをチェックするだけであることがわかります。

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

これが私がすることです：

私はimmutable.jsを使用しているので、見たいものをすべて含むMap（不変オブジェクト）を渡すだけです。

<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に更新されます。

OK。FlatListにデータプロパティの外部のデータ変更を認識させたい場合は、extraDataに設定する必要があることがわかったので、今は次のようにします。

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

参照：https：//facebook.github.io/react-native/docs/flatlist#extradata

Buttonを使用する場合は、onPress内のsetStateを使用してデータを更新できます。その後、SetStateはFlatListを再レンダリングします。

たくさんの検索と本当の答えを探した後、最終的に私はそれが最高だと思う答えを得ました：

       <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}これに変更した後、それは魅力のように動作しました。これが誰かに役立つことを願っています。

ここで前の答えの単なる拡張。確実にする2つの部分。extraDataを追加することと、keyExtractorが一意であることを確認してください。keyExtractorが一定の場合、再レンダリングはトリガーされません。

<FlatList
data={this.state.AllArray}
extraData={this.state.refresh}
renderItem={({ item,index })=>this.renderPhoto(item,index)}
keyExtractor={item => item.id}
>
                                    </FlatList>

追加することでこの問題を解決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>
    );
  }

に交換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,
}]

私にとっての秘訣は、extraDataとアイテムコンポーネントへのドリルダウンでした。

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 });
    }
  }
}

インタラクションによって変更される変数を extraData

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

たとえば、チェックボックスが付いた変化するリストを扱っている場合です。

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

FlatListにpropとstateの両方のデータ変更を認識させたい場合は、propとstateの両方を参照するオブジェクトを作成し、フラットリストを更新できます。

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

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

react-native-flatlistでは、これらはextraDataと呼ばれるプロパティです。以下の行をフラットリストに追加します。

 <FlatList
          data={data }
          style={FlatListstyles}
          extraData={this.state}
          renderItem={this._renderItem}
       />

この例では、再レンダリングを強制するには、変数を変更するだけです。 machine

const [selected, setSelected] = useState(machine)

useEffect(() => {
    setSelected(machine)
}, [machine])

使用するだけ：

onRefresh={true}

flatListコンポーネント内。

FlatlistのextraDataが機能せず、たまたまreduxの小道具を使用していました。これは、ED209の回答のコメントからの問題と同様に聞こえました。小道具を受け取ったときに手動でsetStateを呼び出すことになりました。

componentWillReceiveProps(nextProps: StateProps) {
    if (this.props.yourProp != null && nextProps.yourProp) {
        this.setState({ yourState: processProp(nextProps.yourProp) });
    }
}


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

> React 17を使用している場合は、getDerivedStateFromPropsを使用してください