React Native - For Loop组件

Question

我尝试使用组件的循环数，但似乎无效。我setState的totalitem至5，并且输出部件只有1.

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

Answer 1

return内部的for循环将结束循环。你应该使用Array.prototype.map()。不要忘了map的return结果。

_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} /> 
); 
}