React Native - For Loop-Komponenten

Question

Ich versuche, für die Anzahl der Komponenten für die Schleife, aber es schien nicht funktioniert. I setState die totalitem bis 5, und die Ausgangskomponenten nur 1.

_renderSomeItems(){ 
    for(var i = 0; i < this.state.totalitem; i++){ 
    return(
     <SpecialItem key={i} /> 
    ); 
    }  
} 

Answer 1

return innerhalb einer for Schleife wird die Schleife beendet. Sie sollten Array.prototype.map() verwenden. Nicht vergessen return Ergebnis map.

_renderSomeItems(){ 
    // considering this.state.totalitem is to be an array 
    return this.state.totalitem.map((item, index) => { 
    return(
     <SpecialItem key={index} /> 
    ); 
    }  
} 

// or 

_renderSomeItems(){ 
    const results = []; 
    for(var i = 0; i < this.state.totalitem; i++){ 
    results.push(<SpecialItem key={i} />); 
    } 
    return results; 
} 

Answer 2

lodash

import _ from 'lodash' 

_renderSomeItems(){ 
    return _.range(this.state.totalitem).map(item, index) => (
    <SpecialItem key={i} /> 
); 
}