Компонент FlatList rendeItem не распознает ключевое слово `this`

Question

Мне нужно вызвать функцию внутри функции renderItem, которая вызывается для каждого элемента в данных FlatList. Функция будет исходить от компонента, из которого она поступает, и использует немного состояния компонента, однако она всегда возвращает ошибку, что метод не определен, когда речь идет о получении этого метода или, в этом отношении, данных в состоянии компонента.

Вот метод и как выглядит FlatList

  renderItem({ item, index }) {    
    return (
      <TouchableOpacity onPress={() => {this.goToStaffMemberPage(item.id)} }>
        <View style={GenericStyles.styles.genericCard}>
          <Text style={GenericStyles.styles.genericCardTitle}> {item.first_name.toUpperCase() + " " + item.last_name.toUpperCase()} </Text>
          <Text style={GenericStyles.styles.genericCardDescription}> {item.role_name.toUpperCase()} </Text>
        </View>
      </TouchableOpacity>
    );
  }

<FlatList
 data={this.state.staffList}
 keyExtractor={(item, index) => index.toString()}
 renderItem={this.renderItem}
 contentContainerStyle={GenericStyles.styles.genericContainer}
/>

Answer 1

Это потому, что вы не предоставляете ему доступ к this. Вы можете связать его (предпочтение в constructor), выполнив:

constructor(props){
   super(props);
   this.renderItem.bind(this);
}

или используя функцию стрелки непосредственно при определении renderItem:

renderItem = ({ item, index }) => {    
    return (
      <TouchableOpacity onPress={() => {this.goToStaffMemberPage(item.id)} }>
        <View style={GenericStyles.styles.genericCard}>
          <Text style={GenericStyles.styles.genericCardTitle}> {item.first_name.toUpperCase() + " " + item.last_name.toUpperCase()} </Text>
          <Text style={GenericStyles.styles.genericCardDescription}> {item.role_name.toUpperCase()} </Text>
        </View>
      </TouchableOpacity>
    );
  }