undefined不是对象(评估'this.onPress.bind')

Question

要点: Dashboard.js

我正在使用React-Native创建一个iOS应用程序,在渲染我的Dashboard.js时出现此错误.

我的Dashboard.js呈现不同scrollableTabView的每个包含一个ListView,我已经包含了下面一个列表项的一些代码.

renderArchiveOrder(order) {
  return (
    <TouchableHighlight onPress={this.onPress.bind(order.id)}>
       <View style={styles.listObject}>
       <View style={styles.thumbnail}>
       <Text style={styles.title}>#{order.bid}</Text>
       <Text style={styles.time}>TID</Text>
       <Text style={styles.subTime}>{order.time}</Text>
     </View>
     <View style={styles.information}>
        <Text style={styles.restaurantName}>{title}</Text>
        <Text style={styles.dropoffName>{order.locations.dropoff.address}</Text>
     </View>
     </View>
    </TouchableHighlight>
    );
  }

我的问题是,当呈现Dashboard.js时,应用程序崩溃并显示包含的屏幕截图.

它明确指出这renderArchiveOrder: Dashboard.js @ 364:0是一个错误,这是我的onPress功能.我无法理解我的错误是第364行,为什么我的TouchableHighlightonPress不起作用.

id: index是364行.

onPress = (index) => {
  this.props.navigator.push({
    title: 'Order',
    component: Order,
    passProps: {
      id: index
    }
  })
};

当我只是尝试将数据发送到点击功能并将导航器推送到新视图时,为什么会出现这种情况？

Answer 1

由于您将renderArchiveOrder方法作为值传递给另一个组件,因此它会丢失其上下文.因此,this方法中的变量将不会引用您的组件实例,并且尝试访问this.onPress将产生undefined.

要解决此问题,只需将方法绑定到组件实例,然后再将其传递给ListView组件:

<ListView
  dataSource={this.state.archiveDataSource}
  renderRow={this.renderArchiveOrder.bind(this)}
  style={styles.listView}/>