Error de onPress "no es una function" y "no está definido"

Tomando los pasos de mi primer bebé hacia el aprendizaje de Rect Native, y he estado estancado con estos errores por un time. Cuando hago clic en el elemento:

introduzca la descripción de la imagen aquí

Tengo estos errores:

introduzca la descripción de la imagen aquí

Aquí está mi código React Native:

import React, { Component } from 'react'; import { AppRegistry, Text, View, ListView, StyleSheet, TouchableHighlight } from 'react-native'; export default class Component5 extends Component { constructor(){ super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { userDataSource: ds }; this._onPress = this._onPress.bind(this); } _onPress(user){ console.log(user); } renderRow(user, sectionId, rowId, hightlightRow){ return( <TouchableHighlight onPress={() => {this._onPress(user)}}> <View style={styles.row}> <Text style={styles.rowText}>{user.name}: {user.email}</Text> </View> </TouchableHighlight> ) } fetchUsers(){ fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.json()) .then((response) => { this.setState({ userDataSource: this.state.userDataSource.cloneWithRows(response) }); }); } componentDidMount(){ this.fetchUsers(); } render() { return ( <ListView style={styles.listView} dataSource={this.state.userDataSource} renderRow={this.renderRow.bind()} /> ); } } const styles = StyleSheet.create({ listView: { marginTop: 40 }, row: { flexDirection: 'row', justifyContent: 'center', padding: 10, backgroundColor: 'blue', marginBottom: 3 }, rowText: { flex: 1, color: 'white' } }) AppRegistry.registerComponent('Component5', () => Component5); 

Muy agradecido por cualquier input!

Error de novato: se olvidó de enlazar renderRow correctamente en el componente. Escribí:

renderRow={this.renderRow.bind()}

y, por supuesto, debe ser:

renderRow={this.renderRow.bind(this)}

Está intentando vincular this en muchos lugares diferentes, pero por ejemplo, en renderRow={this.renderRow.bind()} no enlazan nada. También está utilizando la syntax de la function de flecha a veces …

Te recomiendo que uses la syntax de la function de flecha para tus methods de class para que ya no tengas que vincular this (es una característica de la syntax de la function de estilo de flecha), es decir

  1. Eliminar this._onPress = this._onPress.bind(this);
  2. Reescribir _onPress a _onPress = user => console.log(user);
  3. Llámalo a través de <TouchableHighlight onPress={() => this._onPress(user)}>

Puede hacer esto con todos los demás methods de class y nunca tendrá que usar .bind(this) nuevamente.