Call this.props in Funktion außerhalb Render gibt undefined

Question

Ich habe dieses Problem mit meiner Flatlist. Im Grunde zerstöre ich meinen Code, um ihn lesbarer zu machen. Jedoch mein Problem, wenn ich das this.props außerhalb des Renders nenne, gibt es mein undefine. Hier ist mein Code unten:

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} 
    /> 
) 
} 

Aber wenn ich nicht zu anderen Funktion das renderItem trennen. Ich kann die this.props zugreifen:

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

Bei der Verwendung reagieren-native und ES6 classes es wird nicht automatisch Ihre Funktionen binden, die auf Ihren Klassen deklariert wird, so this wird ein Live-Objekt darstellen für den unbekannten Kontext sein oder sogar undefined, was this.props zu undefined verursacht.

Wir müssen den richtigen Wert von this zu unseren Methoden auf eigene Faust behandeln. Deshalb ist entweder Gebrauch:

• Wechsel zu this.renderItem.bind(this)
• oder Pfeil Funktionen wie renderItem=() => {}