JSX를 사용하여 n 번 배열을 반복하는 방법

Question

내 앱에서 React/JSX를 사용하고 있습니다.

처음으로에서 n 번 API의 데이터를 다시 작성해야합니다. 버튼을 클릭하면 더 많은 시간을 거듭납니다. 또 하나의 클릭 -> 또 다른 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 호출은 위치에 따라 달라집니다 만, 배열을 업데이트하기 위해, 당신은 당신의 handleClick

에 this.setState를 이용해야한다

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

데이터를 얻는 방법에 대한 단서가 없지만 일반적인 원칙입니다. 기존 this.state.arr 및 concat을 새 데이터로 배열에 가져옵니다.

bind 또는 button 이벤트 처리기에서 화살표 기능을 사용해야합니다.