L'événement Onclick à l'intérieur d'une boucle for passe les données du dernier élément pour chaque ligne

Question

J'essaie de créer des liens hypertexte et lors d'un clic il faut passer les données à la fonction javascript. Je reçois les données du dernier élément à chaque fois que l'un des liens hypertexte générés est cliqué.

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

Ceci est dû à closure. La manière la plus simple de résoudre ce problème consiste à utiliser let ou const à l'intérieur de votre loop. for(const transaction in transactionList) { ... }.

Vérifiez l'exemple de ce problème MDN dans la section Création fermetures dans les boucles: Une erreur commune

Answer 2

J'ai résolu en utilisant le code ci-dessous, il peut aider les autres.

{ 
     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 
    )}