J'obtiens un problème en utilisant react, où j'essaye de cliquer sur un élément de liste et d'appeler une méthode, chooseTopic, pour la classe mais je reçois le message "Uncaught TypeError: _this3.chooseTopic n'est pas une fonction ReactJS"

Voici à peu près ma classe:

class Topicselect extends Component {
    constructor(props){
        super(props);
        this.state = {
            topics: ['math','english','science']
        }
    }
    chooseTopic(){
        console.log('has been clicked')
    }
    render(){
        const topics = this.state.topics.map(function(topic, i){
            return(<li key={i} onClick={() => this.chooseTopic()}>{topic}
            </li>)
        })
        return(
            <div className="topicselect">   
                <ul>
                  <p onClick={()=> this.chooseTopic()}>hello world</p>
                 {topics}
               </ul>
            </div>  
        )
    }
}

export default Topicselect;

Lorsque j'ai cliqué sur le paragraphe hello world, il appelle la fonction, mais lorsque je clique sur les éléments de la liste, cela me donne l'erreur, Uncaught TypeError: _this3.chooseTopic n'est pas une fonction ReactJS

Des idées?

2
moesh 27 juil. 2017 à 00:30

2 réponses

Meilleure réponse

C'est parce que vous utilisez une fonction pour votre rappel Array#map. Utilisez une fonction fléchée:

const topics = this.state.topics.map((topic,  i) => {
  return (
    <li key={i} onClick={() => this.chooseTopic()}>
      {topic}
    </li>
  )
})

La raison est que, dans une expression de fonction, this ne fera pas référence à votre composant, cela dépend de la façon dont il est appelé. Puisque this ne fait pas référence au composant, chooseTopic n'est pas trouvé comme méthode donc l'erreur. Une fonction de flèche ne lie pas this et fait donc référence au this de la portée englobante - le composant.

7
Andrew Li 26 juil. 2017 à 21:34

L'objet this n'a pas de référence. Dans React, la fonction de rappel ou le gestionnaire d'événements ne sait pas qu'il fait partie de la classe react Component.

L'objet this peut être lié ou une syntaxe de fonction de flèche utilisée lors du référencement du rappel (gestionnaire d'événements).

Ce concept est présenté dans React: ceci est nul dans le gestionnaire d'événements.

Je ne sais pas si ce code fonctionnera dans votre situation. À des fins de démonstration:

return(<li key={i} onClick={ this.chooseTopic.bind(this) }>{topic}

Ou

return(<li key={i} onClick={(e) => this.chooseTopic(e)}>{topic}

Vous devrez peut-être modifier la signature de votre gestionnaire d'événements pour accepter l'objet événement:

chooseTopic(e){
...
0
Eeshwar Das 2 juin 2018 à 20:48