FlatList rendeItem组件无法识别`this`关键字

时间:2019-11-07 20:25:44

标签: react-native this react-native-flatlist

我必须在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}
/>

1 个答案:

答案 0 :(得分:2)

那是因为您没有授予它访问<table><tbody><tr><th>x</th><th>y</th><th>z</th><th>a</th><th>%</th></tr><tr><td>5</td><td>8.5</td><td>lem, lem</td><td>or, or </td><td>1</td></tr><tr><td>5</td><td>9.5</td><td>lem, or</td><td>or, or</td><td>1</td></tr><tr><td>10</td><td>8</td><td>or</td><td>or</td><td>1</td></tr></tbody></table>的权限。您可以执行以下操作来绑定它(在this中优先):

constructor

或在定义renderItem时直接使用箭头功能:

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