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> ); } ，我已经在下面的一个列表项中添加了一些代码。

renderArchiveOrder: Dashboard.js @ 364:0

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

它明确指出onPress正在抛出错误，这是我的TouchableHighlight函数。 我无法理解我的错误是行 364 ，以及为什么我的id: index onPress不起作用。

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

function initController() {
    controller = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: "onLeave"
        }
    });

    controller.scrollTo(function(pos) {
        TweenMax.to(window, 1, {
            scrollTo: {
                y: pos,
                autoKill: true
            }
        });
    });
}

function initAnimation() {
    wipeAnimation = new TimelineMax();

    $.each(ui.slides, function(i, slide) {
        wipeAnimation
            .add(TweenMax.to(slide, 2000, {y: '0'}))
            .add(TweenMax.fromTo(slide, 5000, {y: '0'}, {
                y: '-100%',
                onComplete: function() {
                    if (i < ui.slideCount - 1) { // don't run on last slide
                        updateActiveSlide(ui.slides[i + 1]); // activate next slide
                    }
                },
                onReverseComplete: function() {
                    updateActiveSlide(slide);
                }
            }));
    });
}

function initScene() {
    scene = new ScrollMagic.Scene({
        triggerElement: ui.el,
        duration: '100%'
    })
    .setTween(wipeAnimation)
    .setPin(ui.el, {
        pushFollowers: false
    })
    .addTo(controller);
}

为什么在我尝试将数据发送到点击功能并将导航器推送到新视图时会发生这种情况？

Answer 1

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

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

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