React Native - Dynamisch onPress Event

Ich bin neu in react-native und ich bin in einigen Fragen, die ich nicht sicher bin, wie man anpackt.React Native - Dynamisch onPress Event

Ich habe Komponenten, die basierend auf einigen Daten API dynamisch gerendert werden.

for (var i = 0; i < data.length; i++) 
{  
    categoryComponents.push(
     <Card key={data[i].id}> 
      <CardItem> 
       <Body> 
        <TouchableHighlight onPress={(event) => { 
         const { navigate } = this.props.navigation; 
         navigate('Category', { category: data[i].id }); 
        }}> 
         <Text>{data[i].name + " " + data[i].id}</Text> 
        </TouchableHighlight> 
       </Body> 
      </CardItem> 
     </Card> 
    ); 
}

Wie Sie sehen können, ich dynamische Komponenten in einem Array speichern. Welche mache ich auf den Bildschirm:

render() { 
    return (
     <Container> 
      <Content style={styles.spacer}>{categoryComponents}</Content> 
     </Container> 
    ) 
}

Das Problem ist, dass in meiner TouchableHighlight Komponente, das onPress Ereignis nicht die data[i].id Variable zu akzeptieren scheint. Es wird die Fehlermeldung undefined ausgegeben. Allerdings verwende ich es außerhalb des onPress Ereignisses und es ist definiert.

Ich habe versucht, dieses Problem zu beheben, damit ich meinen Code geändert:

for (var i = 0; i < data.length; i++) 
{ 
    var name = data[i].name; 
    var id = data[i].id; 

    categoryComponents.push(
     <Card key={id}> 
      <CardItem> 
       <Body> 
        <TouchableHighlight onPress={(event) => { 
         const { navigate } = this.props.navigation; 
         navigate('Category', { category: id }); 
        }}> 
         <Text>{name + " " + id}</Text> 
        </TouchableHighlight> 
       </Body> 
      </CardItem> 
     </Card> 
    ); 
}

Wie Sie sehen können, habe ich einfach die Werte speichere ich in lokale Variablen verwenden und diese Variablen anstelle des data verweisen.

Dies behebt das Problem nicht, aber gab mir mehr Einblick.

Jetzt meine TouchableHighlight Komponenten onPress Ereignis akzeptiert die Variable, aber es verwendet nur die letzte Iteration der Schleife Zuordnung.

So ist meine id Variable immer 9 über alle Komponenten innerhalb der TouchableHighlight zugewiesen. Auch wenn außerhalb onPress Ereignis die id Variable ändert sich.

Aufgrund dieses Problems sind keine meiner Links dynamisch. Wie kann ich dynamische onPress Ereignisse auf einer TouchableHighlight Komponente haben?

EDIT: Ich verwende native-base für die Komponenten.

Quelle

2017-10-04 Lars Peterson

Warum nicht 'FlatList' verwenden und den Ärger sparen? – Raymond

Es hat nichts mit React Native zu tun, es geht um Javascript Umfang und Schließung.

var deklarieren Sie eine Variable, die bei function scope arbeitet, nicht block scope.

Da onPress-Methode async aufgerufen wird, ist die i Variable der Wert nach for loop.

Änderung Schleife Variablendeklaration var-let löst dieses Problem

// let declare a variable works at `block scope` 
for (let i = 0; i < data.length; i++){}

Sie How do JavaScript closures work? als Referenz möchten.

Quelle

2017-10-04 13:36:18

React Native - Dynamisch onPress Event

Antwort

Verwandte Themen