React 5 2 Utilisation de listes avec tat
Maintenant que nous savons afficher une liste de dépenses, comment faire pour qu'elle se mette à jour quand l'utilisateur ajoute une nouvelle entrée via le formulaire ? La réponse est dans App.js : c'est là que nous devons gérer le tableau des dépenses, puisque c'est le composant qui le détient.
Ajouter une dépense au tableau d'état
On importe useState de React, puis on déclare un état pour le tableau des dépenses, initialisé avec les dépenses factices :
const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
const addExpenseHandler = (expense) => {
setExpenses((prevExpenses) => {
return [expense, ...prevExpenses];
});
};
Dans addExpenseHandler, on reçoit la nouvelle dépense en paramètre. Pour l'ajouter au tableau, on passe à setExpenses une fonction qui reçoit l'état précédent (prevExpenses). À l'intérieur, on retourne un nouveau tableau qui place expense en premier, suivi du spread de l'ancien tableau (...prevExpenses). Cette approche garantit que React utilise toujours le dernier instantané d'état, même si plusieurs ajouts s'enchaînent rapidement.
Pourquoi la forme fonction plutôt que [expense, ...expenses] directement ? Parce que dès qu'une mise à jour dépend de l'état précédent (ce qui est le cas ici : on ajoute aux dépenses existantes), il faut utiliser cette syntaxe pour éviter les bugs de timing. Chaque nouvelle dépense s'ajoute désormais au début de la liste, et l'interface se met à jour automatiquement.
C'est exactement ainsi qu'on rend des listes dynamiques avec état dans React. Dans le prochain cours, nous allons résoudre l'avertissement key que React affiche dans la console quand on génère des listes.
En résumé
Cette leçon explique comment gérer dynamiquement une liste de dépenses en React en utilisant le hook useState. Vous apprendrez à ajouter de nouvelles dépenses à un tableau existant grâce à l'opérateur spread (...) et à mettre à jour l'état de manière sécurisée en passant une fonction à la fonction de mise à jour. Cette approche garantit que chaque nouvelle dépense s'ajoute correctement à la liste sans muter directement l'état.
Points clés
- Importer et utiliser useState pour gérer l'état des dépenses dans app.js
- Créer une fonction addExpense qui reçoit les nouvelles dépenses en paramètre
- Utiliser l'opérateur spread (...) pour extraire les éléments existants du tableau et ajouter le nouvel élément
- Passer une fonction à la fonction de mise à jour d'état pour accéder au dernier instantané (snapshot) de l'état
- Placer la nouvelle dépense au début de la liste pour un meilleur affichage dynamique
- Éviter de muter directement l'état en créant un nouveau tableau plutôt qu'en modifiant l'existant
Questions fréquentes
Pourquoi utiliser une fonction pour mettre à jour l'état plutôt que de passer l'état directement?
Lorsque vous mettez à jour votre état en fonction de l'état précédent, vous devez utiliser la fonction de mise à jour spéciale qui reçoit automatiquement le dernier instantané de l'état. Cela garantit que vous travaillez toujours avec les données les plus à jour, évitant les bugs liés aux mises à jour asynchrones.
À quoi sert l'opérateur spread (...) dans la manipulation des listes?
L'opérateur spread permet d'extraire tous les éléments d'un tableau existant et de les insérer dans un nouveau tableau. Cela vous permet d'ajouter de nouvelles dépenses sans modifier le tableau original, ce qui respecte le principe d'immuabilité de React.
Comment ajouter une nouvelle dépense au début de la liste?
En structurant le nouvel état avec la nouvelle dépense en première position, suivi de l'opérateur spread pour inclure toutes les dépenses précédentes. Cela place automatiquement chaque nouvelle dépense en haut de la liste.