Loop je tegen de vervelende “TypeError: Cannot Read Property ‘Map’ of Undefined” fout aan in je React applicatie? Deze fout kan lastig te debuggen zijn, maar vrees niet – wij zijn er om je te helpen.
In dit artikel bespreken we de veel voorkomende oorzaken en oplossingen om je te helpen deze fout op te lossen. Of je nu een doorgewinterde React developer bent of net begint, deze gids zal je helpen je app weer op de rails te krijgen.
Wat veroorzaakt de “TypeError: Cannot Read Property ‘Map’ of Undefined” fout?
De “TypeError: Cannot Read Property ‘Map’ of Undefined” fout treedt meestal op wanneer je probeert een property of methode van een ongedefinieerde waarde te gebruiken in je React code.
Eenvoudig gezegd treedt de fout op wanneer je probeert te mappen met een ongedefinieerde waarde, zoals een array die niet is geïnitialiseerd of nog geen gegevens heeft ontvangen.
In het onderstaande voorbeeld haal je todo-items uit JSON Placeholder data, maar de map methode wordt gecalld voordat de gegevens van een API verzoek zijn aangekomen.
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;De bovenstaande code zal de “TypeError: Cannot read properties of undefined (reading ‘map’)” fout:
Je moet dus een manier zoeken om React te laten weten dat de todos status een array is, nog voordat de array wordt gevuld, of je moet voorkomen dat de map methode wordt uitgevoerd totdat de todos statusvariabele zijn data krijgt van het API verzoek.
3 manieren om de “TypeError: Cannot Read Property ‘Map’ of Undefined” fout op te lossen
Hier zijn drie manieren om de “TypeError: Cannot Read Property ‘Map’ of Undefined” fout in React op te lossen:
- Initialiseer je state variabele in een lege array
- Gebruik comparison operators
- Gebruik de optional chaning operator (?.)
Laten we elk van deze oplossingen onderzoeken en hoe ze je kunnen helpen de fout in je React code op te lossen.
1. Initialiseer je state variabele in een lege array
Een van de directe oplossingen voor de “TypeError: Cannot Read Property ‘Map’ of Undefined” fout is ervoor te zorgen dat de array variabele waarover je probeert te mappen gedefinieerd is.
Je kunt je state variabele standaard initialiseren op een lege array, wat ervoor zorgt dat de variabele altijd bestaat en geen foutmelding geeft als je er overheen probeert te mappen.
Hieronder vind je bijvoorbeeld twee vergelijkbare componenten, waarbij de state variabele van de eerste niet is geïnitialiseerd op een lege array, terwijl de tweede wel is geïnitialiseerd:
// 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>
);
}In het bovenstaande voorbeeld wordt de state variabele myList standaard geïnitialiseerd op een lege array met behulp van useState([]). Dit zorgt ervoor dat zelfs als myList aanvankelijk ongedefinieerd is, het altijd een array zal zijn en niet de “TypeError: Cannot Read Property ‘Map’ of Undefined” fout.
Voor het fetch voorbeeld kun je ook de state variabele todos initialiseren tot een lege array ([]):
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. Gebruik comparison operators
Een andere oplossing is om comparison operators te gebruiken om te controleren of de array variabele gedefinieerd is voordat je er overheen mapt. Je kunt hiervoor de ternary of logische AND (&&) operator gebruiken.
Hier zijn voorbeelden van het gebruik van de ternary operator:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList ? myList.map(item => <li>{item}</li>) : null}
</ul>
);
}In dit voorbeeld controleer je of de arrayvariabele myList gedefinieerd is voordat je er overheen probeert te mappen. Als myList niet gedefinieerd is, geeft de ternary operator null terug, en wordt er niets weergegeven. Als myList gedefinieerd is, wordt de map functie gecalld en worden de lijst-items weergegeven.
Dit is vergelijkbaar met het gebruik van de logische AND operator:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList && myList.map(item => <li>{item}</li>)}
</ul>
);
}Met het gebruik van comparison operator zoals de ternary operator kun je het laden afhandelen, zodat iets anders op het scherm wordt weergegeven terwijl je gegevens uit de API leidt:
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. Gebruik de optional chaining operator (?.)
Je kunt ook de optional chaining operator (?.) gebruiken die in ES2020 werd geïntroduceerd. Met deze operator kun je veilig toegang krijgen tot properties of methoden, zoals de map methode van een array, zonder een fout te geven als de array ongedefinieerd is.
Hier is een voorbeeld van een functional component die de chaining operator gebruikt om myList state variabele te controleren:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<div>
{myList?.map((item) => (
<p>{item}</p>
))}
</div>
);
}In het bovenstaande voorbeeld gebruik je de optional chaining operator om veilig toegang te krijgen tot de array variabele myList. Als myList ongedefinieerd is, wordt er niets weergegeven. Als myList gedefinieerd is, wordt de map methode gecalld, en worden de lijst-items weergegeven.
Samenvatting
De “TypeError: Cannot Read Property ‘Map’ of Undefined” fout kan optreden in React bij gebruik van de map methode op een ongedefinieerde of null waarde.
Om deze fout op te lossen hebben we drie oplossingen besproken. Het gebruik van comparison operators is echter de meest veelzijdige oplossing, omdat die kan omgaan met situaties waarin je API een leeg antwoord of een nulwaarde zou kunnen sturen.
Als je niet zeker weet of de ontvangen gegevens een array zullen zijn, kun je enkele methoden toevoegen om het gegevenstype te controleren en te converteren voordat je de map methode callt.
Bekijk Kinsta’s Applicatie Hosting en start vandaag nog je volgende React project!
Nu is het jouw beurt: Ben je dit probleem ooit tegengekomen? Hoe heb je het opgelost? Zijn er andere benaderingen die je hebt gebruikt die niet in dit artikel zijn behandeld? Laat het ons weten in de comments!
