onPress 错误 "is not a function" 和 "is undefined"

Question

迈出学习 Rect Native 的第一步，一段时间以来一直被这些错误困扰。当我点击项目时：

我收到这些错误：

这是我的 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);

非常感谢任何输入！

Answer 1

您正试图在许多不同的地方绑定 this，但是例如在 renderRow={this.renderRow.bind()} 中什么都不绑定。您有时也会使用箭头函数语法..

我建议您对 class 方法使用箭头函数语法，这样您就不必再绑定 this（这是箭头函数的一个特性语法），即

删除this._onPress = this._onPress.bind(this);
将_onPress重写为_onPress = user => console.log(user);
通过<TouchableHighlight onPress={() => this._onPress(user)}>

您可以使用所有其他 class 方法执行此操作，而无需再次使用 .bind(this)。

Answer 2

菜鸟错误 - 忘记在组件中正确绑定 renderRow。我写道：

renderRow={this.renderRow.bind()}

当然应该是：

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

onPress 错误 "is not a function" 和 "is undefined"

onPress error "is not a function" and "is undefined"

javascript

ios

reactjs

react-native

touchablehighlight