React Native undefined in not an object

Question

我正在尝试从数组中生成一系列按钮。我有以下代码

render: function() {
    var locations = this.state.campus.map(function (item){
        var that = this;
        return(
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>{item}</Text>
            </TouchableHighlight>
        )
    });

    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>Campus</Text>
            <View style={styles.flowDown}>
                {locations}
            </View>
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>'Hello'</Text>
            </TouchableHighlight>

        </View>
    );
}

这可以很好地呈现并且底部的按钮可以完美地工作。但是，地图功能中生成的按钮在按下时会产生错误。我已经尝试了 that = this 并使用了 bind(this)/bind(that) 但我仍然收到错误。

这样可以生成按钮吗？我不想使用 ListView，因为它会生成自己的全屏显示。

Answer 1

试试这个：

render: function() {
    var that = this;
    var locations = this.state.campus.map(function (item){
        return(
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>that.buttonPress("this")}>
                <Text style={styles.buttonText}>{item}</Text>
            </TouchableHighlight>
        )
    });

    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>Campus</Text>
            <View style={styles.flowDown}>
                {locations}
            </View>
            <TouchableHighlight style={styles.button}
                underlayColor='#dddddd'
                onPress={()=>this.buttonPress("this")}>
                <Text style={styles.buttonText}>'Hello'</Text>
            </TouchableHighlight>

        </View>
    );
}