Question

我的React Native Component出了问题。

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不是函数。

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

功能控制台在render()中正常登录。我试图在构造函数中绑定this，但我仍然得到错误。

Answer 1

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

语法
var new_array = arr.map(callback[, thisArg])
参数

[...]

<强> thisArg

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

[...]

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

您可以将this上下文作为第二个参数传递给Array#map：

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

或者，直接使用Function#bind：

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

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

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

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

Answer 2

仅供参考，Andrew Li的评论中提到的bind解决方案可以通过更改此行来完成

{list.map(this.renderListItem)}

到这个

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

React Native this2.'function'不是函数

2 个答案:

语法

参数