Inhalt dynamisch aus einer Array-Map-Funktion in React Native rechen

Question

Ich versuche, Daten aus einem Array zu erhalten und mithilfe der Kartenfunktion Inhalte zu rendern. Schauen Sie sich

**{this.lapsList()}** 

und der damit verbundenen

**lapsList()** 

Funktion zu verstehen, was ich versuche zu tun. Das Ergebnis wird nichts angezeigt wird (Views unter Ansicht, etc.) Hier ist meine vereinfachte Code:

class StopWatch extends Component { 

constructor(props) { 
    super(props); 

    this.state = { 
    laps: [] 
    }; 
} 

render() { 
    return (
    <View style={styles.container}> 
     <View style={styles.footer}> 
      <View><Text>coucou test</Text></View> 
      {this.lapsList()} 
     </View> 
    </View> 
) 
} 

lapsList() { 

    this.state.laps.map((data) => { 
     return (
     <View><Text>{data.time}</Text></View> 
    ) 
    }) 

} 

_handlePressLap() { 

    console.log("press lap"); 

    if (!this.state.isRunning) { 

    this.setState({ 
     laps: [] 
    }) 

    return 

    } 

    let laps = this.state.laps.concat([{'time': this.state.timeElapsed}]); 

    this.setState({ 
     laps: laps 
    }) 

    console.log(laps); 

} 

}

Answer 1

das zugeordnete Array Vergessen Sie nicht zu return, wie:

lapsList() { 

    return this.state.laps.map((data) => { 
     return (
     <View><Text>{data.time}</Text></View> 
    ) 
    }) 

} 

Referenz für die map() methode: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Versuchen Sie die lapsList Funktion aus Ihrer Klasse und in Ihre re nder Funktion:

render() { 
    const lapsList = this.state.laps.map((data) => { 
    return (
     <View><Text>{data.time}</Text></View> 
    ) 
    }) 

    return (
    <View style={styles.container}> 
     <View style={styles.footer}> 
     <View><Text>coucou test</Text></View> 
     {lapsList} 
     </View> 
    </View> 
) 
}