Comment re-rendre le flatlist?

Question

Contrairement à ListView, nous pouvons mettre à jour this.state.datasource. Existe-t-il une méthode ou un exemple pour mettre à jour FlatList ou le restituer?

Mon objectif est de mettre à jour la valeur du texte lorsque l'utilisateur appuie sur le bouton ...

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

Answer 1

Utilisez la propriété extraData sur votre composant FlatList.

Comme le dit la documentation:

En passant extraData={this.state} à FlatList nous nous assurons que FlatList sera rendu à nouveau lorsque le state.selected changera. Sans définir cet accessoire, FlatLis t ne saura pas qu'il est nécessaire de rendre à nouveau les éléments, car il s'agit également d'un PureComponent et la comparaison d'accessoire ne présentera aucun changement.

Answer 2

Pour une solution simple et rapide Essayez:

1. définir des données supplémentaires sur une valeur booléenne.

   extraData = {this.state.refresh}

2. Basculer la valeur de l'état booléen lorsque vous souhaitez rendre / actualiser la liste

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

Answer 3

Oh que c'est facile, il suffit d'utiliser extraData

Vous voyez la façon supplémentaire de données fonctionne en arrière-plan est le FlatList ou la VirtualisedList vérifie juste que cet objet a changé via un normal onComponentWillReceiveProps méthode.

Donc, tout ce que vous avez à faire est de vous assurer que vous donner quelque chose que les modifications apportées à l' extraData.

Voici ce que je fais:

Je suis à l'aide d' immutable.js donc, tout ce que je fais c'est que je passe d'une Carte (objet immuable) qui contient tout ce que je veux regarder.

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

De cette façon, lorsque this.props.foo ou this.props.bar changement CustomComponentRow de mettre à jour, parce que les lois immuables de l'objet sera différent que le précédent.

Answer 4

OK.Je viens de découvrir que si nous voulons que FlatList connaisse le changement de données en dehors de l’accessoire de données, nous devons le définir sur extraData, donc je le fais comme ceci maintenant:

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

se référer à: https://facebook.github.io/react-native/docs/flatlist#extradata

Answer 5

Si vous allez avoir un bouton, vous pouvez mettre à jour les données avec un setState à l'intérieur du onPress. SetState rendra alors à nouveau votre FlatList.