Question

我的平板电脑出现了这个问题。基本上我破坏了我的代码，使其更具可读性。然而，每当我在渲染之外调用this.props时，我的问题就是我的undefine。这是我的代码：

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 classes时，它不会自动绑定在类上声明的函数，因此this将是未知上下文的活动对象，甚至是{{1导致undefined成为this.props。

我们需要自己处理undefined到我们方法的正确值。因此要么使用：

更改为this
或使用this.renderItem.bind(this)

在render外部函数中调用this.props给出undefine

1 个答案: