Vous êtes confronté à l’erreur frustrante « TypeError : Cannot Read Property ‘Map’ of Undefined » dans votre application React ? Cette erreur peut être difficile à déboguer, mais n’ayez crainte, nous avons tout ce qu’il vous faut.
Dans cet article, nous allons vous présenter les causes communes et les solutions pour vous aider à résoudre cette erreur. Que vous soyez un développeur React chevronné ou que vous débutiez, ce guide vous aidera à remettre votre application sur les rails.
Quelles sont les causes de l’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined » ?
L’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined » se produit généralement lorsque vous essayez d’accéder à une propriété ou à une méthode d’une valeur indéfinie dans votre code React.
En termes clairs, l’erreur se produit lorsque vous essayez de mapper une valeur non définie, comme un tableau qui n’a pas été initialisé ou qui n’a pas encore reçu de données.
Dans l’exemple ci-dessous, vous obtenez des éléments de tâches à partir de données JSON Placeholder, mais la méthode map est appelée avant que les données provenant d’une requête API ne soient arrivées.
import { useState, useEffect } from 'react';
function App() {
const [todos, setTodos] = useState();
useEffect(() => {
const getTodos = async () => {
const response = await fetch(
'https://jsonplaceholder.typicode.com/todos?_limit=5'
);
const data = await response.json();
setTodos(data);
};
getTodos();
}, []);
console.log(todos);
return (
<div>
{todos.map((todo) => (
<div key={todo.id}>
<h2>Item: {todo.title}</h2>
</div>
))}
</div>
);
}
export default App;Le code ci-dessus génère l’erreur « TypeError : Cannot read properties of undefined (reading ‘map’) » :
Vous devez chercher un moyen de faire savoir à React que l’état todos est un tableau avant même que le tableau ne soit rempli, ou vous devez éviter que la méthode map ne s’exécute jusqu’à ce que la variable état todos reçoive ses données de la requête API.
3 façons de corriger l’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined »
Voici trois façons de corriger l’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined » dans React :
- Initialisez votre variable d’état à un tableau vide
- Utilisez des opérateurs de comparaison
- Utilisez l’opérateur de chaînage optionnel ( ?.)
Explorons chacune de ces solutions et comment elles peuvent vous aider à résoudre l’erreur dans votre code React.
1. Initialiser votre variable d’état à un tableau vide
L’une des solutions directes à l’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined » est de s’assurer que la variable tableau que vous essayez de mapper est définie.
Vous pouvez initialiser votre variable d’état à un tableau vide par défaut, ce qui garantira que la variable existe toujours et qu’elle ne produira pas d’erreur lorsque vous tenterez de l’affecter à un tableau.
Par exemple, voici deux composants similaires, la variable d’état du premier n’est pas initialisée à un tableau vide, alors que celle du second l’est :
// Before initializing your state variable to an empty array
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList.map(item => <li>{item}</li>)}
</ul>
);
}
// After initializing your state variable to an empty array
function MyComponent() {
const [myList, setMyList] = useState([]);
return (
<ul>
{myList.map(item => <li>{item}</li>)}
</ul>
);
}Dans l’exemple ci-dessus, la variable d’état myList est initialisée à un tableau vide par défaut en utilisant useState([]). Cela garantit que même si myList est indéfini au départ, il s’agira toujours d’un tableau et qu’il n’y aura pas d’erreur de type « TypeError : Cannot Read Property ‘Map’ of Undefined ».
Pour l’exemple de la récupération, vous pouvez également initialiser la variable d’état todos à un tableau vide ([]) :
import { useState, useEffect } from 'react';
function App() {
// Initialize the state to an empty array of todos.
const [todos, setTodos] = useState([]);
useEffect(() => {
const getTodos = async () => {
const response = await fetch(
'https://jsonplaceholder.typicode.com/todos?_limit=5'
);
const data = await response.json();
setTodos(data);
};
getTodos();
}, []);
console.log(todos);
return (
<div>
{todos.map((todo) => (
<div key={todo.id}>
<h2>Item: {todo.title}</h2>
</div>
))}
</div>
);
}
export default App;2. Utiliser des opérateurs de comparaison
Une autre solution consiste à utiliser des opérateurs de comparaison pour vérifier si la variable de tableau est définie avant de la recouvrir. Pour cela, vous pouvez utiliser l’opérateur ternaire ou l’opérateur logique AND (&&).
Voici des exemples d’utilisation de l’opérateur ternaire :
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList ? myList.map(item => <li>{item}</li>) : null}
</ul>
);
}Dans cet exemple, vous vérifiez si la variable de tableau myList est définie avant d’essayer de la mapper. Si myList n’est pas défini, l’opérateur ternaire renvoie null et rien n’est rendu. Si myList est défini, la fonction map est appelée et les éléments de la liste sont rendus.
Cette méthode est similaire à l’utilisation de l’opérateur logique AND :
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList && myList.map(item => <li>{item}</li>)}
</ul>
);
}En utilisant des opérateurs de comparaison tels que l’opérateur ternaire, vous pouvez gérer le chargement, de sorte que quelque chose d’autre s’affiche à l’écran pendant que vous recherchez des données dans l’API :
import { useState, useEffect } from 'react';
function App() {
const [todos, setTodos] = useState();
useEffect(() => {
const getTodos = async () => {
const response = await fetch(
'https://jsonplaceholder.typicode.com/todos?_limit=5'
);
const data = await response.json();
setTodos(data);
};
getTodos();
}, []);
console.log(todos);
return (
<div>
{todos ? (
todos.map((todo) => (
<div key={todo.id}>
<h2>Item: {todo.title}</h2>
</div>
))
) : (
<h1>Loading...</h1>
)}
</div>
);
}
export default App;3. Utiliser l’opérateur de chaînage optionnel ( ?.)
Vous pouvez également utiliser l’opérateur de chaînage optionnel ( ?.) introduit dans ES2020. Cet opérateur vous permet d’accéder en toute sécurité à des propriétés ou à des méthodes, telles que la méthode map d’un tableau, sans générer d’erreur si le tableau est indéfini.
Voici un exemple de composant fonctionnel qui utilise l’opérateur de chaînage pour vérifier la variable d’état myList:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<div>
{myList?.map((item) => (
<p>{item}</p>
))}
</div>
);
}Dans l’exemple ci-dessus, vous utilisez l’opérateur de chaînage optionnel pour accéder à la variable de tableau myList en toute sécurité. Si myList est indéfini, rien ne sera rendu. Si myList est défini, la méthode map sera appelée et les éléments de la liste seront rendus.
Résumé
L’erreur « TypeError : Cannot Read Property ‘Map’ of Undefined » peut se produire dans React lors de l’utilisation de la méthode map sur une valeur non définie ou nulle.
Pour corriger cette erreur, nous avons discuté de trois solutions. Cependant, l’utilisation d’opérateurs de comparaison est la solution la plus polyvalente car elle permet de gérer des situations où votre API peut envoyer une réponse vide ou une valeur nulle.
En outre, si vous n’êtes pas sûr que les données que vous recevrez seront un tableau, vous pouvez ajouter des méthodes pour vérifier et convertir le type de données avant d’appeler la méthode map.
Découvrez l’hébergement d’applications de Kinsta et lancez votre prochain projet React dès aujourd’hui !
À vous de jouer : Avez-vous déjà rencontré ce problème ? Comment l’avez-vous résolu ? Y a-t-il d’autres approches que vous avez utilisées et qui ne sont pas abordées dans cet article ? Faites-nous en part dans les commentaires !
