Erreur: this.friendChat n'est pas une fonction (Jquery + Réaction)

Question

J'ai un fichier jsx, qui crée <li> éléments sur le chargement de la page. Ces articles <li> sont créés en fonction des valeurs de retour ajax.

Pour chaque élément <li>, j'ajoute un événement "click" par programme, ce qui appelle une fonction de réaction (friendChat). Mais en mettant en œuvre cela, je reçois l'erreur suivante. (Mais je suis en mesure d'obtenir d'autres propriétés qui initialisés constructeur à l'intérieur..)

• Erreur: this.friendChat est pas une fonction

Après mon fichier JSX.

Merci d'avance.

fichier JSX

import React from 'react' 

class Home extends React.Component { 


constructor(props) { 

    super(props); 
    this.state = {username: "Anu"}; 
    this.friendChat = this.friendChat.bind(this); 


    } 


    friendChat(friendId) 
    { 
     console.log("Clicked friend id: "+ friendId); 

    } 





componentDidMount() { 
    console.log('Component DID MOUNT!'); 


$(document).ready(function(){ 


    $.ajax({ 
     type: "GET", 
     url: "/friends/myFriends", 
     success: function(data){ 

      if (data == "No friends") 
      { 
       console.log("No friends exist"); 
       document.getElementById('friends').innerHTML = "Please add 
    friends"; 
      } 
      else 
      { 
      console.log("Friends: "+data); 
      //Displaying friends in div 
      for (var i = 0; i < data.length; i++) 
       { 
        console.log("Friend: "+ data[i]); 
       var li=document.createElement("li"); 
       //var br=document.createElement("br"); 
       li.appendChild(document.createTextNode(data[i])); 
       li.setAttribute("id",data[i]); 


       console.log(this.state.username); 
      //It's Printing correctusername (Anu) initialised inside 
      //the constructor 


       //Adding on click event for each friend 

       li.addEventListener("click", function() { 
       this.friendChat(this.id); }, false); 
       //Here it's showing the error of this.friendChat is not a 
       //function 

      //Appending list item to document 
      document.getElementById("friends").appendChild(li); 
      } 
     } 


    }.bind(this) 
}); 


} 



render() { 
    return (


    <div> 



     <div className="home_recentfriends"> 
      <ul id="friends"></ul> 
     </div> 


    </div> 


    ) 
    } 


} 

export default Home 

Answer 1

Solution 1: Transform toutes vos fonctions à l'intérieur de cette méthode en graisse flèche et tout fonctionnera.

Exemple:

$(document).ready(function(){...}) 

Changement dans:

$(document).ready(()=>{...}) 

Solution 2: stocker la référence du ce mot-clé dans une variable et l'accès à cette variable à la place.

Exemple:

componentDidMount() { 
const self = this; 

.... 

self.friendChat(self.id); 

}