Vi siete imbattuti nel fastidioso errore “TypeError: Cannot Read Property ‘Map’ of Undefined” nella vostra applicazione React? Fare il debug di questo errore può essere complicato, ma non temete: abbiamo pensato a voi.
In questo articolo illustreremo le cause e le soluzioni più comuni per aiutarvi a risolvere questo errore. Che siate degli sviluppatori React esperti o alle prime armi, questa guida vi aiuterà a rimettere in sesto la vostra applicazione.
Quali sono le cause dell’errore “TypeError: Cannot Read Property ‘Map’ of Undefined”?
L’errore “TypeError: Cannot Read Property ‘Map’ of Undefined” si verifica di solito quando si cerca di accedere a una proprietà o a un metodo di un valore non definito nel codice React.
In parole povere, l’errore si verifica quando si cerca di mappare un valore non definito, come ad esempio un array che non è stato inizializzato o che non ha ancora ricevuto dati.
Nell’esempio che segue, state ottenendo elementi di todo da dati JSON Placeholder, ma il metodo map viene chiamato prima che i dati di una richiesta API siano arrivati.
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;Il codice qui sopra lancerà il messaggio “TypeError: Cannot read properties of undefined (reading ‘map’)”:
Dovrete cercare un modo per far sapere a React che lo stato todos è un array anche prima che l’array venga popolato, oppure dovrete evitare che il metodo map venga eseguito fino a che la variabile stato todos non riceve i suoi dati dalla richiesta API.
3 modi per risolvere il problema “TypeError: Cannot Read Property ‘Map’ of Undefined”
Ecco tre modi per risolvere l’errore “TypeError: Cannot Read Property ‘Map’ of Undefined” in React:
- Inizializzare la variabile di stato con un array vuoto
- Utilizzare gli operatori di confronto
- Usare l’operatore di concatenamento opzionale (?.)
Analizziamo ciascuna di queste soluzioni e come possono aiutare a risolvere l’errore nel codice React.
1. Inizializzare la variabile di stato in un array vuoto
Una delle soluzioni dirette all’errore “TypeError: Cannot Read Property ‘Map’ of Undefined” è assicurarsi che la variabile array su cui si sta cercando di mappare sia definita.
È possibile inizializzare la variabile di stato su un array vuoto per impostazione predefinita, in modo da assicurarsi che la variabile esista sempre e che non venga lanciato un errore quando si cerca di mapparla.
Ad esempio, i seguenti sono due componenti simili: la variabile di stato del primo non è inizializzata su un array vuoto, mentre è inizializzata nel secondo:
// 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>
);
}Nell’esempio precedente, la variabile di stato myList viene inizializzata di default su un array vuoto utilizzando useState([]). Questo assicura che anche se myList è inizialmente indefinito, sarà sempre un array e non lancerà il messaggio “TypeError: Cannot Read Property ‘Map’ of Undefined”.
Per l’esempio di fetch, potete anche inizializzare la variabile di stato todos a un array vuoto ([]):
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. Utilizzare gli operatori di confronto
Un’altra soluzione è quella di utilizzare gli operatori di confronto per verificare se la variabile dell’array è definita prima di eseguire la mappatura su di essa. A tale scopo è possibile utilizzare l’operatore ternario o logico AND (&&).
Ecco alcuni esempi di utilizzo dell’operatore ternario:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList ? myList.map(item => <li>{item}</li>) : null}
</ul>
);
}In questo esempio, state verificando se la variabile dell’array myList è definita prima di provare a mapparla. Se myList non è definito, l’operatore ternario restituisce null e non viene visualizzato nulla. Se myList è definito, viene richiamata la funzione map e gli elementi dell’elenco vengono restituiti.
Questa operazione è simile all’utilizzo dell’operatore logico AND:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList && myList.map(item => <li>{item}</li>)}
</ul>
);
}Con l’uso di operatori di confronto come l’operatore ternario, è possibile gestire il caricamento, in modo da visualizzare qualcos’altro sullo schermo mentre si conducono i dati dall’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. Utilizzare l’operatore di concatenamento opzionale (?.)
È anche possibile utilizzare l’operatore di concatenamento opzionale (?.) introdotto in ES2020. Questo operatore permette di accedere in modo sicuro a proprietà o metodi, come il metodo map di un array, senza che venga lanciato un errore se l’array è indefinito.
Ecco un esempio di componente funzionale che utilizza l’operatore di concatenamento per controllare la variabile di stato myList:
function MyComponent() {
const [myList, setMyList] = useState();
return (
<div>
{myList?.map((item) => (
<p>{item}</p>
))}
</div>
);
}Nell’esempio precedente, state utilizzando l’operatore di concatenamento opzionale per accedere alla variabile dell’array myList in modo sicuro. Se myList è indefinito, non verrà visualizzato nulla. Se myList è definito, verrà richiamato il metodo map e gli elementi dell’elenco verranno renderizzati.
Riepilogo
L’errore “TypeError: Cannot Read Property ‘Map’ of Undefined” può verificarsi in React quando si utilizza il metodo map su un valore non definito o nullo.
Abbiamo visto tre soluzioni per risolvere questo errore.. Tuttavia, l’uso degli operatori di confronto è la soluzione più versatile perché può gestire situazioni in cui l’API potrebbe inviare una risposta vuota o un valore nullo.
Inoltre, se non siete sicuri che i dati ricevuti siano un array, potete aggiungere alcuni metodi per verificare e convertire il tipo di dati prima di chiamare il metodo map.
Scoprite l’Hosting di Applicazioni di Kinsta e iniziate il vostro prossimo progetto React oggi stesso!
Ora tocca a voi: avete mai riscontrato questo problema? Come l’avete risolto? Ci sono altri approcci che avete utilizzato e che non sono stati trattati in questo articolo? Fatecelo sapere nei commenti!
