Rendi il contenuto dinamicamente da una funzione mappa di matrice in React Native

Question

Sto provando a ottenere i dati da una matrice e utilizzando la funzione di mappa per il rendering del contenuto. Guardate

**{this.lapsList()}** 

e l'associato

**lapsList()** 

funzione per capire quello che sto cercando di fare. Il risultato è a dir sta visualizzando (Viste sotto vista, ecc) Ecco il mio codice semplificato:

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

Non dimenticare di return matrice mappato, come:

lapsList() { 

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

} 

Riferimento per il metodo map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

Provare a spostare la funzione lapsList fuori dalla classe e nel proprio funzione precedente:

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