J'essaie donc d'utiliser React Propriété FlatList renderItem de Native, mais quelque chose de très étrange se produit.
La propriété data
est définie sur un tableau qui contient des éléments qui ne sont pas indéfinis, mais ensuite, dans la fonction renderItem
, elle me donne une erreur indiquant que l'argument de la fonction est indéfini, sauf si J'appelle l'argument item
.
Voici mon code:
export default class Profile extends React.Component {
onLearnMore = (user) => {
this.props.navigation.navigate('UserDetail', user)
}
render() {
return (
<List>
<FlatList
data={data.users}
renderItem={( {item} ) => {
console.log(item)
return (<ListItem
roundAvatar
title={`${item.fName} ${item.lName}`}
onPress={() => this.onLearnMore(item)}
/>)
}}
/>
</List>
)
}
}
Si j'ai troqué {item}
avec {userData}
, puis userData
ne serait pas défini plus tard dans la fonction. Est-ce que quelqu'un sait pourquoi cela se produit?
La raison en est que chaque objet du tableau data
est référencé via la propriété item
du paramètre réel passé à la fonction renderItem
. Ici, vous utilisez déstructuration d'objet pour extraire uniquement la propriété item
de l'objet passé, c'est pourquoi vous utilisez {item}
. Lorsque vous modifiez ce nom en userData
(qui est manquant dans l'argument de la fonction), vous obtenez undefined
. Jetez un œil à la signature de fonction de renderItem
ici .
Si vous souhaitez utiliser userData
au lieu de item
, vous pouvez renommer item
en userData
comme
renderItem= ({item: userData}) => {...}
J'espère que cela vous aidera!
Veuillez lire attentivement cette réponse. Je l'ai vécu et j'ai perdu de nombreuses heures à comprendre pourquoi il ne s'agissait pas d'un nouveau rendu:
Nous devons définir extraData
prop de FlatList
s'il y a un changement d'état comme ceci:
<FlatList data={this.state.data} extraData={this.state} .../>
Veuillez consulter la documentation officielle ici: