it-swarm.com.de

Wie kann ich die Flatlist erneut rendern?

Im Gegensatz zu ListView können wir this.state.datasource aktualisieren. Gibt es eine Methode oder ein Beispiel zum Aktualisieren oder erneuten Rendern von FlatList?

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

Verwenden Sie die extraData-Eigenschaft in Ihrer FlatList-Komponente.

Wie in der Dokumentation heißt es:

Durch die Übergabe von extraData={this.state} an FlatList stellen wir sicher, dass FlatList selbst wiedergegeben wird, wenn sich state.selected ändert. Ohne diese Requisite festzulegen, würde FlatList nicht wissen, dass Elemente neu gerendert werden müssen, da es sich ebenfalls um eine PureComponent handelt und der Prop-Vergleich keine Änderungen anzeigt.

105
ED209

Versuchen:

  1. zusatzdaten auf einen booleschen Wert setzen.

    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
    })
    
14
Hradesh Kumar

Oh, das ist einfach, benutze einfach extraData

Sie sehen die Art und Weise, wie zusätzliche Daten hinter den Kulissen funktionieren, ist FlatList oder VirtualisedList überprüft nur ob sich das Objekt geändert hat über eine normale onComponentWillReceiveProps-Methode.

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

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

Wenn sich this.props.foo oder this.props.bar ändern, wird unsere CustomComponentRow auf diese Weise aktualisiert, da das unveränderliche Objekt ein anderes als das vorherige ist.

11
SudoPlz

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

4
WilliamC

OK.Ich habe gerade herausgefunden, dass wir, wenn wir möchten, dass die FlatList die Datenänderung außerhalb der Datenstütze kennt, auf extraData gesetzt werden, also mache ich das jetzt so:

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

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

4

Benutz einfach:

onRefresh={true}

in Ihrer flatList-Komponente.

1
Taha khozooie

Ich habe dieses Problem durch Hinzufügen von extraData={this.state} gelöst. Bitte überprüfen Sie den untenstehenden Code, um weitere Informationen zu erhalten

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

Um in diesem Beispiel ein erneutes Rendern zu erzwingen, ändern Sie einfach die Variable machine

const [selected, setSelected] = useState(machine)

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

Setzen Sie Variablen, die von Ihrer Interaktion geändert werden, unter extraData

Sie können kreativ sein.

Zum Beispiel, wenn Sie eine Änderungsliste mit Kontrollkästchen bearbeiten.

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

nach langem Suchen und Suchen nach einer richtigen 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 benutzte es nicht so: __. funktionierte nicht: keyExtractor = {(item) => item.ID} Ich hoffe, das hilft jemandem.

0
ramin azadi

Für mich war der Trick extraData und noch einmal ein Drilldown in die Elementkomponente 

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

Ich habe FlatList durch SectionList ersetzt und es wird bei Statusänderungen ordnungsgemäß aktualisiert.

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

Das einzige, was zu beachten ist, ist, dass section eine Differenzstruktur hat:

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

In der react-native-flatlist handelt es sich um eine Eigenschaft mit dem Namen extraData. Füge die folgende Zeile zu deiner Flatlist hinzu.

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

Wenn die FlatList know die Datenänderung sowohl prop als auch state haben soll, können wir ein Objekt erstellen, das sowohl prop als auch state referenziert, 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

0