RN-Elemente: Bind-Liste Onpress

Question

Relativ neu zu React Native; und im folgenden Beispielcode möchte ich eine Liste mit einer gebundenen onPress Funktion erstellen. Leider wird beim Drücken eines Gegenstandes immer der letzte Gegenstand gedruckt, der in diesem Fall "Suze" ist.

import { List, ListItem } from 'react-native-elements'; 
... 

onPress(name){ 
    console.log(name); 
} 

renderPerson(person) { 
    return (< ListItem 
    key={person._id} 
    title={person.name} 
    onPress={() => this.onPress(person.name)} 
    />) 
} 


renderPeople =() => { 
    people = [{"_id": 1, "name": "Eric"}, 
      {"_id":2, "name": "Paul"}, 
      {"_id":3, "name": "Suze"}] 
    return people.map((p) => (
    this.renderPerson(p) 
)) 
} 

render() { 
    return (
    <List> 
     {this.renderPeople()} 
    </List> 
) 
} 

Update

inklusive Konstruktor:

constructor(props) { 
    super(props); 
    this.renderPerson = this.renderPerson.bind(this); 
    this.renderPeople = this.renderPeople.bind(this); 
} 

Aber immer noch das letzte Element ist

gedruckt versucht

Answer 1

einfach Ihr Beispiel, und es funktioniert wie erwartet, so dass Sie nicht fehlen darf etwas in dem Code, den du eingefügt hast.

aber sagen, dass zur besseren Lesbarkeit willen, ich würde es so schreiben:

constructor(props) { 
    super(props); 
    this.renderPerson = this.renderPerson.bind(this); 
    this.renderPeople = this.renderPeople.bind(this); 
    } 

    renderPerson(person) { 
    return (<ListItem 
     key={person._id} 
     title={person.name} 
     onPress={() => this.onPress(person.name)} 
    />); 
    } 

    onPress(name) { 
    console.log(name); 
    } 

    renderPeople(people) { 
    return people.map((p) => this.renderPerson(p)); 
    } 

    render() { 
    const people = [{"_id": 1, "name": "Eric"}, 
       {"_id":2, "name": "Paul"}, 
       {"_id":3, "name": "Suze"}]; 
    return (
     <View style={{flex: 1}}> 
     <List> 
      {this.renderPeople(people)} 
     </List> 
     </View> 
    ); 
    }