Come rieseguire il rendering di flatlist?

A differenza di ListView, possiamo aggiornare this.state.datasource. Esiste un metodo o un esempio per aggiornare FlatList o riprodurlo nuovamente?

Il mio obiettivo è aggiornare il valore del testo quando l'utente preme il pulsante ...

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

Utilizza la extraDataproprietà sul tuo componente FlatList.

Come afferma la documentazione:

Passando extraData={this.state}a FlatListci assicuriamo che FlatListeseguirà nuovamente il rendering quando verranno state.selectedapportate modifiche. Senza impostare questo prop, FlatListnon saprei che ha bisogno di rieseguire il rendering di alcun elemento perché è anche un PureComponente il confronto dell'elica non mostrerà alcuna modifica.

Per una soluzione rapida e semplice Prova:

1. imposta dati aggiuntivi su un valore booleano.

   extraData = {this.state.refresh}

2. Alterna il valore dello stato booleano quando si desidera rieseguire il rendering / aggiornare l'elenco

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

Oh è facile, basta usare extraData

Vedi il modo in cui i dati extra funzionano dietro le quinte è il FlatList o il VirtualisedList controlla solo se quell'oggetto è cambiato tramite un onComponentWillReceivePropsmetodo normale .

Quindi tutto ciò che devi fare è assicurarti di dare qualcosa che cambi al file extraData.

Ecco cosa faccio:

Sto usando immutable.js quindi tutto quello che faccio è passare una mappa (oggetto immutabile) che contiene tutto ciò che voglio guardare.

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

In questo modo, quando this.props.fooo this.props.barcambia, il nostro CustomComponentRowsi aggiornerà, perché l'oggetto immutabile sarà diverso dal precedente.

OK, ho appena scoperto che se vogliamo che FlatList conosca la modifica dei dati al di fuori del prop data, dobbiamo impostarlo su extraData, quindi ora lo faccio in questo modo:

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

fare riferimento a: https://facebook.github.io/react-native/docs/flatlist#extradata

Se hai intenzione di avere un Button, puoi aggiornare i dati con un setState all'interno di onPress. SetState eseguirà quindi nuovamente il rendering della tua FlatList.

dopo molte ricerche e cercando una risposta reale finalmente ho ottenuto la risposta che penso sia la migliore:

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

il mio problema principale era (KeyExtractor) non lo stavo usando in questo modo. non funziona: keyExtractor = {(item) => item.ID} dopo che sono passato a questo ha funzionato come un fascino spero che questo aiuti qualcuno.

Solo un'estensione delle risposte precedenti qui. Due parti per assicurarti, assicurati di aggiungere extraData e che il tuo keyExtractor sia unico. Se il tuo keyExtractor è costante, il rendering non verrà attivato.

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

Ho risolto questo problema aggiungendo extraData={this.state}Si prega di controllare il codice di seguito per maggiori dettagli

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

L'ho sostituito FlatListcon SectionListe si aggiorna correttamente al cambio di stato.

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

L'unica cosa da tenere a mente è che sectionhanno una struttura diff:

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

Per me, il trucco era extraData e il drill-down nel componente item ancora una volta

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

Metti le variabili che verranno modificate dalla tua interazione in extraData

Puoi essere creativo.

Ad esempio, se hai a che fare con un elenco di modifiche con caselle di controllo.

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

Se vogliamo che la FlatList sappia che i dati cambiano sia prop che state , possiamo costruire un oggetto che fa riferimento sia a prop che a state e aggiornare la flatlist.

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

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

In react-native-flatlist, sono una proprietà chiamata extraData. aggiungi la riga sotto alla tua lista piatta.

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

In questo esempio, per forzare un nuovo rendering, è sufficiente modificare la variabile machine

const [selected, setSelected] = useState(machine)

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

Usa solo:

onRefresh={true}

all'interno del tuo flatListcomponente.

ExtraData di Flatlist non funzionava per me e mi è capitato di utilizzare un prop da redux. Sembrava simile ai problemi dei commenti nella risposta di ED209. Ho finito per chiamare manualmente setState quando ricevo il prop.

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

Per quelli di voi che usano> React 17 usate getDerivedStateFromProps