React Native this2.'function' 不是一个函数

我的 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>
    )
}

In renderListItem我收到一个错误_this2.sayHi 不是一个函数.

网上查了一下，大多数帖子都不符合我的情况；我看了一下这个帖子但我已经有一个箭头函数，所以这不是上下文问题。

功能控制台记录得很好render()。 我尝试绑定this在构造函数中，但我仍然收到错误。

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

Syntax

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

参数

[...]

thisArg

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

[...]

If a thisArg参数被提供给map，它将被用作回调的this价值。否则，该值undefined将被用作其this value.

你可以通过this上下文作为第二个参数Array#map:

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

Or, use Function#bind直接地：

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

最后，您可以使用箭头函数：

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

虽然我个人会选择第一个选项。