Comment corriger l'erreur "TypeError: Cannot read properties of undefined (reading 'map')" ?
Dans le langage JavaScript, les tableaux sont gérés avec la classe Array. Cette classe fournit un ensemble de méthodes pour utiliser ou modifier un tableau. La fonction "map()" en fait partie. Elle permet d'appliquer une fonction à chaque élément du tableau. Cette fonction avancée est très souvent utilisée, car elle permet de réduire la taille du code et de faciliter le traitement des données. Le message d'erreur "TypeError: Cannot read properties of undefined (reading 'map')" est lié à un appel de cette fonction.
Ce message a la même cause qu'un autre message d'erreur semblable, "Cannot read property 'map' of undefined". Ce message s'affiche si la variable sur laquelle vous essayez d'appeler la fonction "map" n'est pas définie. Le problème vient donc de votre algorithme. Il existe un cas dans lequel la variable dont vous pensez qu’elle contient un tableau n'est pas définie, ou bien vous vous êtes trompé de nom de variable. La fonction "map" étant liée à la classe "Array", cela provoque un message d'erreur.
let monTableau = [1, 2, 3]
//Cela va fonctionner
monTableau.map((element) => {
console.log("Le double de cet élément est : + (element * 2)")
}
//Erreur
monTableau2.map((element) => {
console.log("Le double de cet élément est : + (element * 2)")
}
La première chose à vérifier est le nom et le contenu de votre variable. Vous pouvez avoir fait une faute de frappe ou avoir une variable qui entre en conflit à cause de son nom. Si votre code est bon, mais qu'il arrive que votre tableau ne soit pas défini, alors il faut effectuer un test avant d'appeler votre fonction. Une autre solution est l'opérateur de chaînage optionnel "?.". Cet opérateur permet de n'appeler la suite que si la référence qui est avant n'est pas "undefined" ou "null".
//Condition pour vérifier que la variable est bien un tableau
If (Array.isArray(monTableau)) {
monTableau.map((element) => {
console.log("Le double de cet élément est : + (element * 2)")
}
}
//Avec l'opérateur de chaînage conditionnel, il n'y aura pas d'erreur, ce morceau de code ne sera pas exécuté
monTableau2.?map((element) => {
console.log("Le double de cet élément est : + (element * 2)")
}