for 루프 내의 Onclick 이벤트는 모든 행에 대해 마지막 요소의 데이터를 전달합니다.

Question

하이퍼 링크를 만들려고하는데 클릭 할 때 데이터를 자바 스크립트 함수에 전달해야합니다. 생성 된 하이퍼 링크 중 하나가 클릭 될 때마다 마지막 요소의 데이터를 가져옵니다.

for(var transaction in transactionList){ 

     transactionHistoryMap.push(
     <div> 
      <a style={{'cursor':'pointer'}} onClick={() => {this.transactionDetail(key,transactionList[transaction].transactionId,transactionList[transaction].transactionName)}} className='transactionHistoryLinks'>{transactionList[transaction].transactionName}</a><br/> 
     </div> 
    ); 
    } 

Answer 1

이것은 closure 때문에 발생합니다. 이를 해결하는 가장 쉬운 방법은 loop 안에 let 또는 const을 사용하는 것입니다. for(const transaction in transactionList) { ... }.

확인 루프 섹션 만들기 폐쇄에 MDN에서이 문제의 예 : 나는 코드 아래 사용하여 해결 한 일반적인 실수

Answer 2

, 그것은 다른 사람을 도움이 될 수 있습니다.

{ 
     transactionHistory[keyName].map(function(value){ 
     transactionHistoryMap.push(
      <div> 
      <a style={{'cursor':'pointer'}} onClick={() => {this.transactionDetail(keyName,value.transactionId,value.transactionName)}} className='transactionHistoryLinks'>{value.transactionName}</a><br/> 
      </div> 
     ) 
     },this 
    )}