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()。别忘了return 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} />
  );
}

React Native - For循环组件

2 个答案: