JSXを使用してn回の配列を繰り返す方法

Question

私のアプリでReact/JSXを使用しています。

最初にでn回APIからデータを取得する必要があります。私がボタンをクリックすると、それはより多くのn回刈り取られます。別のクリック - >別のn回の宝石と何度も繰り返します。 apiが毎回私に1つの結果を与える。私は結果を定義することができれば、必要な

私のコード：

const n=2; 

arr:[]; 


handleClick(){ 
//i need the code to increase n another 2 times 
} 



//the array here without the code to fill api data. not relevant 
this.state.arr.map((d,key)=> 
<span>age: {d.age} </span> 


<button onClick={this.handleClick} > 

最初の結果で期待される結果：

年齢：20

年齢：24

ボタンをクリックした後：

年齢：20

年齢：24

年齢：48

年齢：19

Answer 1

があなたのAPI呼び出しがどこにあるかによって異なりますが、配列を更新するために、あなたは​​

で this.setStateを使用する必要があります

handleClick() { 
    this.setState({ 
    arr: this.state.arr.concat(newContentArray) 
    }) 
} 

どのようにデータを取得するのかわかりませんが、それは一般的な原則です。既存のthis.state.arrとconcatの配列を新しいデータで置き換えます。

またはbuttonイベントハンドラの矢印機能を必ず使用してください。