1
votes

Appel d'une fonction à l'intérieur d'une fonction de carte

J'ai une fonction getNameByVal et je veux l'appeler dans le composant render () et le message d'erreur TypeError: getNameByVal n'est pas une fonction. Mon code est comme ci-dessous. Quelque chose ne va pas?:

function getNameByVal(value){
    switch(val){
       case '0000':
         return "Online";
       case '0001':
         return "In person";
       ...
}
class App extends Component{
  ....
  render(){
    return <div>
     {this.state.checkedItems!==null?this.state.checkedItems.map(key=>getNameByVal(key)):[]} 
    </div>
}

reactjs

2 commentaires

getNameByVal est-il déclaré à l'intérieur ou à l'extérieur de la classe?

Veuillez ajouter plus d'informations sur la structure de votre code, il est difficile de dire à partir de cet exemple où getNameByVal est déclaré?

3 Réponses :

0
votes

On dirait que votre fonction getNameByVal () est hors de portée pour render ().

Ce que vous pouvez faire est de déclarer votre fonction comme une variable qui vous permettra de l'appeler dans votre Map.

Voici comment vous le déclareriez en tant que variable:

const getNameByVal = (value) => {
    switch(value){
        case '0000':
         return "Online";
        case '0001':
         return "In person";
    }
}

Placez-le dans votre Rendor () {...} ou dans la delcaration de votre APP / composant. Ensuite, vous pouvez l'appeler de la même manière

3 commentaires

il a une ligne rouge sous getNameByVal dans la fonction de carte. 'getNameByVal' n'est pas défini.

Les réponses ci-dessus sont toutes les deux correctes. J'ai eu une erreur très stupide dans ma copie locale. Ma fonction était getNameByValue mais je l'ai appelée getNameByVal.

upvote moi, et mal upvote you :) Toujours heureux de vous aider

0
votes

Déplacez votre fonction dans votre classe comme ci-dessous et appelez-la avec this.getNavByVal

class App extends Component {
  constuctor(props) {
    super(props)
    this.getNameByVal = this.getNameByVal.bind(this)
  }
  getNameByVal(value){
    switch(val){
       case '0000':
         return "Online";
       case '0001':
         return "In person";
       ...
  }
  render(){
    return <div>
     {this.state.checkedItems!==null?this.state.checkedItems.map(key=>this.getNameByVal(key)):[]} 
    </div>
}

4 commentaires

J'ai déplacé la fonction à l'intérieur du composant App et l'appelle this.getNameByVal (clé) et elle renvoie la même erreur.

Oh désolé, vous devrez également lier la fonction dans le constructeur si vous utilisez des classes. Je vais mettre à jour ci-dessus.

Merci. J'ai utilisé la fonction de flèche getNameVal = (value) => {...} et cela ne fonctionne toujours pas. Dois-je appeler la fonction après render () et avant return?

Avez-vous vu mon autre solution ci-dessus @ user788448?

0
votes

Si je devais écrire un composant comme celui-ci, je n'utiliserais pas de classes, donc au cas où cela vous serait utile, voici un exemple de la façon dont je le ferais en utilisant des hooks: https://codesandbox.io/embed/crazy-jones-2398c

0 commentaires