Call this.props in function outside render gives undefine

Question

我在我的flatlist上遇到了这个问题。基本上正在破坏我的代码以使其更可读。但是，每当我打电话给这个问题时，我的问题都会在渲染之外提供我的不确定。这是我的代码：

renderItem(item) {
  console.log(this.props) // Gives me undefine
  return (
    <ListItem button>
      <Text>{item.item.name }</Text>
    </ListItem>
  )
}
render() {
  return (
    <FlatList
      keyboardShouldPersistTaps={'always'}
      data={countries.payload.data}
      renderItem={this.renderItem}
      keyExtractor={item => item.name}
    />
  )
}

但是，如果我没有将RenderItem的其他功能分开。我可以访问this.props：

render() {
  return (
    <FlatList
      keyboardShouldPersistTaps={'always'}
      data={countries.payload.data}
      renderItem={({item, index}) => (
        <ListItem button onPress={() => this.props.onPressAction()}> // I get the correct value
          <Text>{item.name }</Text>
        </ListItem>
      )}
      keyExtractor={item => item.name}
    />
  )
}

Answer 1

使用React-native和ES6类时，它不会自动绑定您类上声明的函数，因此this将是未知上下文或什至undefined的实时对象表示导致this.props为undefined。

我们需要独自处理this的正确值。因此，要么使用：

• 更改为this.renderItem.bind(this)
• 或使用renderItem= () => {}
之类的箭头功能