Wie wird die Flatlist neu gerendert?

Im Gegensatz zu ListView können wir this.state.datasource aktualisieren. Gibt es eine Methode oder ein Beispiel, um FlatList zu aktualisieren oder neu zu rendern?

Mein Ziel ist es, den Textwert zu aktualisieren, wenn der Benutzer die Taste drückt ...

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

Verwenden Sie die extraDataEigenschaft für Ihre FlatList-Komponente.

Wie in der Dokumentation angegeben:

Durch die Weitergabe extraData={this.state}an stellen FlatListwir sicher FlatList, dass sich bei den state.selectedÄnderungen neu gerendert wird . Ohne diese Requisite zu setzen, FlatListwürde ich nicht wissen, dass es irgendwelche Elemente neu rendern muss, da es auch eine ist PureComponentund der Requisitenvergleich keine Änderungen zeigt.

Für eine schnelle und einfache Lösung Versuchen Sie:

1. Setzen Sie zusätzliche Daten auf einen booleschen Wert.

   extraData = {this.state.refresh}

2. Schalten Sie den Wert des booleschen Status um, wenn Sie die Liste erneut rendern / aktualisieren möchten

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

Oh, das ist einfach, benutze es einfach extraData

Sie sehen, wie zusätzliche Daten hinter den Kulissen funktionieren: Die FlatList oder die VirtualisedList prüfen nur, ob sich das Objekt über eine normale onComponentWillReceivePropsMethode geändert hat .

Alles, was Sie tun müssen, ist sicherzustellen, dass Sie etwas geben, das sich am ändert extraData.

Folgendes mache ich:

Ich verwende immutable.js, also übergebe ich nur eine Map (unveränderliches Objekt), die alles enthält, was ich sehen möchte.

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

Auf diese Weise wird unser Datum aktualisiert this.props.foooder this.props.bargeändert, CustomComponentRowda das unveränderliche Objekt ein anderes als das vorherige ist.

Ich habe gerade herausgefunden, dass, wenn wir möchten, dass die FlatList die Datenänderung außerhalb der Daten-Requisite kennt, wir sie auf extraData setzen müssen, also mache ich das jetzt so:

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

Siehe: https://facebook.github.io/react-native/docs/flatlist#extradata

Wenn Sie einen Button haben, können Sie die Daten mit einem setState in der onPress aktualisieren. SetState rendert dann Ihre FlatList neu.

Nach langem Suchen und Suchen nach einer echten Antwort habe ich endlich die Antwort bekommen, die ich für die beste halte:

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

Mein Hauptproblem war (KeyExtractor), ich habe es nicht so benutzt. funktioniert nicht: keyExtractor = {(item) => item.ID} Nachdem ich dies geändert habe, hat es wie ein Zauber funktioniert. Ich hoffe, das hilft jemandem.

Ich habe dieses Problem durch Hinzufügen gelöst. extraData={this.state}Bitte überprüfen Sie den Code unten für weitere Details

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

Nur eine Erweiterung der vorherigen Antworten hier. Zwei Teile, um sicherzustellen, dass Sie extraData hinzufügen und dass Ihr keyExtractor eindeutig ist. Wenn Ihr keyExtractor konstant ist, wird kein erneuter Rendern ausgelöst.

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

Ich habe ersetzt FlatListmit SectionListund es ist Updates richtig auf Statusänderung.

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

Das einzige, was Sie beachten müssen, ist sectiondie unterschiedliche Struktur:

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

Für mich war der Trick extraData und ein weiterer Drilldown in die Item-Komponente

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

Fügen Sie Variablen, die durch Ihre Interaktion geändert werden, unter ein extraData

Sie können kreativ sein.

Zum Beispiel, wenn Sie es mit einer Änderungsliste mit Kontrollkästchen zu tun haben.

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

Wenn die FlatList wissen soll, dass die Daten sowohl die Requisite als auch den Status ändern , können wir ein Objekt erstellen , das sowohl auf die Requisite als auch auf den Status verweist, und die Flatlist aktualisieren.

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

Dokumente: https://facebook.github.io/react-native/docs/flatlist#extradata

In der React-Native-Flatlist sind sie eine Eigenschaft, die als extraData bezeichnet wird. Fügen Sie die folgende Zeile zu Ihrer Flatlist hinzu.

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

In diesem Beispiel ändern Sie einfach die Variable, um ein erneutes Rendern zu erzwingen machine

const [selected, setSelected] = useState(machine)

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

Benutz einfach:

onRefresh={true}

in Ihrer flatListKomponente.

Die extraData von Flatlist funktionierten nicht für mich und ich benutzte zufällig eine Requisite von Redux. Dies klang ähnlich wie in den Kommentaren in der Antwort von ED209. Ich habe setState manuell aufgerufen, als ich die Requisite erhalten habe.

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

Für diejenigen unter Ihnen, die> React 17 verwenden, verwenden Sie getDerivedStateFromProps