web-dev-qa-db-fra.com

Comment re-rendre la flatlist?

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} />
reactjsreact-nativereact-native-flatlist
40
shalonteoh

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 lui-même sera rendu à nouveau lorsque le state.selected sera modifié. Sans définir cet accessoire, FlatList ne saura pas qu'il doit restituer les éléments car il s'agit également d'un PureComponent et la comparaison de l'accessoire ne présentera aucun changement.

105
ED209

Essayer:

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

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

Vous voyez comment les données supplémentaires fonctionnent en coulisse: FlatList ou VirtualisedList vérifie simplement si cet objet a changé via une méthode onComponentWillReceiveProps normale.

Donc, tout ce que vous avez à faire est de vous assurer que vous donnez quelque chose qui change la extraData.

Voici ce que je fais:

J'utilise immutable.js donc je ne fais que passer une carte (objet immuable) contenant 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 changera, notre CustomComponentRow sera mis à jour, car l'objet immuable sera différent de l'objet précédent.

11
SudoPlz

Si vous allez avoir un bouton, vous pouvez mettre à jour les données avec un setState dans le onPress. SetState rendra à nouveau votre FlatList. 

4
WilliamC

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, je le fais comme ceci maintenant:

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

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

4
Mahdi Bashirpour

Il suffit d'utiliser:

onRefresh={true}

dans votre composant flatList.

1
Taha khozooie

J'ai résolu ce problème en ajoutant extraData={this.state} Merci de vérifier le code ci-dessous pour plus de détails

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

Dans cet exemple, pour forcer un nouveau rendu, changez simplement la variable machine

const [selected, setSelected] = useState(machine)

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

Placez les variables qui seront modifiées par votre interaction à extraData 

Vous pouvez être créatif.

Par exemple, si vous utilisez une liste de changement avec des cases à cocher.

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

après beaucoup de recherches et de recherche d'une réponse réelle, j'ai enfin la réponse qui, à mon avis, est la meilleure: 

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

mon problème principal était (KeyExtractor) Je ne l'utilisais pas comme ceci . ne fonctionnait pas: keyExtractor = {(item) => item.ID} après l'avoir modifiée, cela fonctionnait comme un charme J'espère que ça aidera quelqu'un.

0
ramin azadi

Pour moi, le truc était extraData et une descente dans le composant d'item 

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

J'ai remplacé FlatList par SectionList et il est mis à jour correctement lors du changement d'état.

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

La seule chose à garder à l’esprit est que section possède une structure diff:

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

Dans react-native-flatlist, il s’agit d’une propriété appelée extraData. ajoutez la ligne ci-dessous à votre liste.

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

Si nous voulons que la FlatList connaisse le changement de données les deux propriétés prop et state, nous pouvons construire un objet référençant à la fois les propriétés prop et state et actualiser la liste standard.

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

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

0
Yogaraj Saravanan