React Native this2.'function'不是函数

Question

我的React Native组件有问题。

sayHi = (s) => {
    console.log('hey' + s)
}

renderListItem(item, i) {

    return (
        <TouchableOpacity
            key={i}
            style={styles.listItem}
            onPress={() => { this.sayHi('bob') }}>

        <Text>{item}</Text>
        </TouchableOpacity>
    )
}

render() {
    this.sayHi('patrick')

    const { list } = this.props

    return (
        <View>
        {list.map(this.renderListItem)}
        </View>
    )
}

在renderListItem我得到一个错误 _this2.sayHi不是一个函数 。

在线搜索，但大多数帖子都不适合我的情况；我看了一下这篇文章但是我已经有了一个箭头功能，所以这不是上下文问题。

功能控制台可以在中正常记录日志render()。我试图this在构造函数中绑定，但仍然收到错误。

Answer 1

Array#map在不同的上下文中执行回调，因此this未正确绑定。根据文档：

句法

var new_array = arr.map(callback[, thisArg])

参量

[…]

thisArg

可选的。this执行回调时用作的值。

[…]

如果thisArg提供了参数map，它将用作回调的this值。否则，该值undefined将用作其this值。

您可以将thiscontext作为第二个参数传递给Array#map：

{list.map(this.renderListItem, this)}

或者，Function#bind直接使用：

{list.map(this.renderListItem.bind(this))}

最后，您可以使用箭头功能：

{list.map((item, i) => this.renderListItem(item, i))}

虽然我会亲自选择第一个选项。