Hast du den frustrierenden Fehler „TypeError: Cannot Read Property ‚Map‘ of Undefined“-Fehler in deiner React-Anwendung? Dieser Fehler kann schwierig zu beheben sein, aber keine Sorge – wir haben für dich eine Lösung.
In diesem Artikel zeigen wir dir die häufigsten Ursachen und Lösungen, mit denen du diesen Fehler beheben kannst. Egal, ob du ein erfahrener React-Entwickler bist oder gerade erst anfängst, dieser Leitfaden wird dir helfen, deine App wieder zum Laufen zu bringen.
Was ist die Ursache für den „TypeError: Cannot Read Property ‚Map‘ of Undefined“ Fehler?
Der Fehler „TypeError: Cannot Read Property ‚Map‘ of Undefined“ tritt typischerweise auf, wenn du versuchst, in deinem React-Code auf eine Eigenschaft oder Methode mit einem undefinierten Wert zuzugreifen.
Im Klartext: Der Fehler tritt auf, wenn du versuchst, einen undefinierten Wert zuzuordnen, z. B. ein Array, das noch nicht initialisiert wurde oder noch keine Daten erhalten hat.
Im folgenden Beispiel erhältst du ToDo-Elemente aus JSON-Platzhalterdaten, aber die Map-Methode wird aufgerufen, bevor die Daten aus einer API-Anfrage eingetroffen sind.
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;Der obige Code löst den „TypeError: Cannot read properties of undefined (reading ‚map‘)“ Fehler:
Du musst nach einer Möglichkeit suchen, React mitzuteilen, dass der Todo-Status ein Array ist, noch bevor das Array gefüllt wird, oder du musst verhindern, dass die map-Methode ausgeführt wird, bis die Todo-Statusvariable ihre Daten von der API-Anfrage erhält.
3 Wege zur Behebung des „TypeError: Cannot Read Property ‚Map‘ of Undefined“ Fehler
Hier sind drei Möglichkeiten, um den Fehler „TypeError: Cannot Read Property ‚Map‘ of Undefined“-Fehler in React zu beheben:
- Initialisiere deine Zustandsvariable auf ein leeres Array
- Verwende Vergleichsoperatoren
- Verwende den optionalen Verkettungsoperator (?.)
Schauen wir uns jede dieser Lösungen an und wie sie dir helfen können, den Fehler in deinem React-Code zu beheben.
1. Initialisiere deine Zustandsvariable mit einem leeren Array
Eine der direkten Lösungen für den Fehler „TypeError: Cannot Read Property ‚Map‘ of Undefined“ ist es, sicherzustellen, dass die Array-Variable, die du zuordnen willst, definiert ist.
Du kannst deine Zustandsvariable standardmäßig mit einem leeren Array initialisieren. Dadurch wird sichergestellt, dass die Variable immer existiert und keinen Fehler auslöst, wenn du versuchst, sie zuzuordnen.
Im Folgenden siehst du zum Beispiel zwei ähnliche Komponenten, wobei die Zustandsvariable der ersten Komponente nicht auf ein leeres Array initialisiert ist, während die zweite Komponente initialisiert ist:
// 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>
);
}Im obigen Beispiel wird die Zustandsvariable myList standardmäßig über useState([]) auf ein leeres Array initialisiert. Dadurch wird sichergestellt, dass myList auch dann, wenn sie anfangs undefiniert ist, immer ein Array ist und nicht den „TypeError“ auslöst: Cannot Read Property ‚Map‘ of Undefined“ auslöst.
Für das Fetch-Beispiel kannst du die Statusvariable todos auch mit einem leeren Array initialisieren ([]):
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. Vergleichsoperatoren verwenden
Eine andere Lösung ist die Verwendung von Vergleichsoperatoren, um zu prüfen, ob die Array-Variable definiert ist, bevor du sie zuordnest. Dazu kannst du den ternären oder den logischen AND (&&) Operator verwenden.
Hier sind Beispiele für die Verwendung des ternären Operators:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList ? myList.map(item => <li>{item}</li>) : null}
</ul>
);
}In diesem Beispiel überprüfst du, ob die Array-Variable myList definiert ist, bevor du versuchst, sie zuzuordnen. Wenn myList undefiniert ist, gibt der ternäre Operator Null zurück und es wird nichts gerendert. Wenn myList definiert ist, wird die Map-Funktion aufgerufen und die Listenelemente werden gerendert.
Dies ist vergleichbar mit der Verwendung des logischen Operators AND:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList && myList.map(item => <li>{item}</li>)}
</ul>
);
}Mit Hilfe von Vergleichsoperatoren wie dem ternären Operator kannst du das Laden handhaben, sodass etwas anderes auf dem Bildschirm angezeigt wird, während du Daten aus der API führst:
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. Verwende den optionalen Verkettungsoperator (?.)
Du kannst auch den optionalen Verkettungsoperator (?.) verwenden, der in ES2020 eingeführt wurde. Mit diesem Operator kannst du sicher auf Eigenschaften oder Methoden zugreifen, z. B. auf die Map-Methode eines Arrays, ohne einen Fehler zu erhalten, wenn das Array undefiniert ist.
Hier ist ein Beispiel für eine funktionale Komponente, die den Verkettungsoperator verwendet, um die Zustandsvariable myList zu überprüfen:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<div>
{myList?.map((item) => (
<p>{item}</p>
))}
</div>
);
}Im obigen Beispiel verwendest du den optionalen Verkettungsoperator, um sicher auf die Array-Variable myList zuzugreifen. Wenn myList undefiniert ist, wird nichts gerendert. Wenn myList definiert ist, wird die Map-Methode aufgerufen und die Listenelemente werden gerendert.
Zusammenfassung
Der Fehler „TypeError: Cannot Read Property ‚Map‘ of Undefined“ kann in React auftreten, wenn die map-Methode auf einen undefinierten oder ungültigen Wert angewendet wird.
Um diesen Fehler zu beheben, haben wir drei Lösungen besprochen. Die Verwendung von Vergleichsoperatoren ist jedoch die vielseitigste Lösung, da sie auch für Situationen geeignet ist, in denen deine API eine leere Antwort oder einen Nullwert senden könnte.
Wenn du nicht sicher bist, ob es sich bei den empfangenen Daten um ein Array handelt, kannst du außerdem einige Methoden hinzufügen, um den Datentyp vor dem Aufruf der Map-Methode zu überprüfen und zu konvertieren.
Teste das Anwendungs-Hosting von Kinsta und starte dein nächstes React-Projekt noch heute!
Jetzt bist du dran: Bist du schon einmal auf dieses Problem gestoßen? Wie hast du es gelöst? Gibt es noch andere Lösungsansätze, die du verwendet hast und die in diesem Artikel nicht erwähnt werden? Lass es uns in den Kommentaren wissen!
