Así que estoy tratando de usar la propiedad renderItem FlatList de React Native, pero está sucediendo algo muy extraño.

La propiedad data se establece en una matriz que tiene elementos que no están indefinidos, pero luego, en la función renderItem, me da un error que dice que el argumento de la función no está definido, a menos que llame el argumento item.

Aquí está mi código:

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 cambiara {item} con {userData}, entonces userData quedaría indefinido más adelante en la función. ¿Alguien sabe por qué sucede esto?

18
Corrado 24 feb. 2018 a las 20:30

3 respuestas

La mejor respuesta

La razón es que, cada objeto en la matriz data se referencia a través de la propiedad item del parámetro real pasado a la función renderItem. Aquí, está utilizando desestructuración de objetos para extraer solo la propiedad item del objeto pasado, es por eso que está utilizando {item}. Cuando cambia este nombre a userData (que falta en el argumento de la función), obtiene undefined. Eche un vistazo a la firma de la función renderItem aquí .

Si desea utilizar userData en lugar de item, puede cambiar el nombre de item a userData como

renderItem= ({item: userData}) => {...}

¡Espero que esto ayude!

30
Prasun 26 feb. 2018 a las 18:11

Por favor lea esta respuesta cuidadosamente. Lo experimenté y perdí muchas horas para descubrir por qué no se estaba volviendo a renderizar:

Necesitamos establecer extraData prop de FlatList si hay algún cambio en el estado de esta manera:

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

Consulte la documentación oficial aquí:

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

6
atulkhatri 25 abr. 2019 a las 12:28

Me faltaba un curlybraces {} alrededor del artículo. Después de agregarlos, ahora funciona bien.

renderItem= {({item}) => this.Item(item.title)}
0
Pravin Ghorle 25 oct. 2019 a las 08:16