web-dev-qa-db-fra.com

ReactNative Flatlist - RenderItem ne fonctionne pas

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?

javascriptreact-nativeundefinedreact-native-flatlist
9
Corrado

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 renderItemici .

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!

19
Prasun

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:

https://facebook.github.io/react-native/docs/flatlist.html

5
atulkhatri