1
votes

Le paramètre .map () n'est pas défini

J'ai un tableau avec des données et je souhaite comparer les données avec event.target.value Quand il s'agit de la même valeur, je veux qu'il obtienne plus d'informations sur les données qui se trouvent dans cette position du tableau.

il dit que le caractère n'est pas défini, et je suppose que c'est un problème de portée mais je ne sais pas comment le résoudre.

Le console.log (character.mass, character.height) est pour à des fins de test.

handleClick(event){

        event.preventDefault();
        const CharacterDataArray = this.props.CharacterData.results
        console.log(CharacterDataArray)

        if(CharacterDataArray.map(character => character.name === event.target.value)) {
            console.log(character.mass, character.height)
        }
        this.setState({
            CharacterName: event.target.value
        })
}

javascript reactjs

6 commentaires

Pouvez-vous également ajouter le résultat de console.log (CharacterDataArray)

Pourquoi utilisez-vous le résultat de map comme condition dans votre instruction if? Recherchez-vous un tableau vide?

Le caractère est utilisé uniquement à l'intérieur de map () . Vous essayez de console.log dans l'instruction if . C'est pourquoi il n'y est pas défini.

@byxor Je le fais parce que je veux retourner le this.state, mais je ne sais pas si c'est la bonne façon? Souhaitez-vous suggérer un forEach ()?

J'ai utilisé la solution de @sandrooco dans le post ci-dessous et il s'avère que la fonction de flèche est facultative. Merci pour l'aide!

ajoutez simplement .langht au et de if

7 Réponses :

2
votes

vous devez utiliser la fonction de flèche pour résoudre le problème de portée comme

constructor () {
this.handleClick = this.handleClick.bind(this);
}

ou vous pouvez lier l'événement click dans le constructeur comme

 handleClick =(event)=>{
  // your code goes here 
}

0 commentaires

0
votes

au lieu d'utiliser .map , vous pouvez utiliser .some pour référence, vous pouvez aller sur ce lien: https://developer.mozilla.org/ fr-FR / docs / Web / JavaScript / Reference / Global_Objects / Array / certains

1 commentaires

et si votre this.props ne peut pas être joignable, vous devez être remplacé par fonction de flèche par exemple: handleClick = () => {...}

2
votes

Le problème est que le caractère n'est défini que dans la fonction de rappel de la map .

Essayez plutôt ceci:

// Look through all characters and return it if the name matches
const matchingChar = CharacterDataArray.find(character => character.name === event.target.value)

// Log if a match has been found
if (matchingChar) {
    console.log(matchingChar.mass, matchingChar.height);
}

1 commentaires

Cela marche! @sandrooco, la fonction flèche est facultative, fonctionne dans les deux sens. Merci!

0
votes

Utilisez la méthode find pour trouver un caractère où le character.name est égal à event.target.value .

 const  hasValue =  CharacterDataArray.find(character => character.name === event.target.value)

   if(hasValue) {

 // write your logic
     }

0 commentaires

0
votes

Vous devez d'abord utiliser la fonction de flèche car à l'intérieur de la fonction de flèche, vous pouvez accéder à "ceci" et la deuxième chose dont vous avez besoin pour vérifier également que le tableau n'est pas vide

    handleClick  = (event) => {

        event.preventDefault();

        if(this.props.CharacterData.results && this.props.CharacterData.results.length > 0) {

     if(this.props.CharacterData.results.map(character => character.name === event.target.value)) {
            console.log(character.mass, character.height)
        }
        this.setState({
            CharacterName: event.target.value
        })

     }
   }

0 commentaires

-1
votes

async handleClick(event){
await event.preventDefault();
let CharacterDataArray = this.props.CharacterData.results;
console.log(CharacterDataArray);
let result=CharacterDataArray.filter(character=>character.name === event.target.value);
    console.log(result.mass, result.height);
}

1 commentaires

preventDefault () ne renvoie aucune promesse? L'autre code lancera une erreur ... ( result est un tableau, pas un objet).

0
votes

Essayez avec ceci: -

CharacterDataArray.map((character) => {  
 if (character.name === event.target.value)) 
  { 
   console.log(character.mass, character.height)
  }
 })

0 commentaires