J'ai un hook personnaliséuseNotificationspour un widget de notification. Ce hook renvoie un tableau contenant l'élément suivant (c'est similaire à l'API de messagerie ant.design) :
add: Fonction pour ajouter une nouvelle notificationremove: Fonction pour obtenir l'ID de notification et supprimer la notificationcontextHandler: JSX passé au rendu des composantsLorsque l'utilisateur appelleadd, il obtient un identifiant qui peut être utilisé pour supprimer la notification
Cette question concerne spécifiquement la fonction de suppression. Puisque j'appelle cette fonction juste après avoir ajouté une nouvelle notification, la fonction reçoit une copie de l'ancienne liste, donc aucun nouvel élément et une erreur est générée. Comment puis-je résoudre ce problème pour que les composants utilisent la même API ?
useNotificationhook Comment puis-je l'utiliser
Codesandbox (pour tester, je l'ai faitsetTimeout，它在3秒内调用了remove()) : https://codesandbox.io/s/goofy-smoke-5q7dw3?file=/src/App.js:405-440
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez créer votre
remove函数使用状态更新器功能，可以访问最新的状态值。这允许您在组件在remove()中重新渲染之前访问新的liststatut.Remarque : Vous modifiez actuellement l'état d'origine en modifiant le
isMounted属性设置为falsede l'objet imbriqué. Même si vous copiez le tableau, vous devez également copier l'objet en cours de mise à jour pour éviter les problèmes de rendu.Voici quelques modifications sur la façon d'accéder à la dernière valeur de l'état et d'éviter les mutations d'état :
const add = useCallback((params) => { const id = v4(); const element = {...params, id, isMounted: true}; setList(list => [...list, element]); // Add your new element while also making a copy of the current state (`list`) return id; }, []); const remove = useCallback((elementId) => { setList((list) => list.map((elem) => elem.id === elementId ? { ...elem, isMounted: false } : elem ) ); setTimeout(() => { setList((list) => list.filter((elem) => elem.id !== elementId)); }, 500); }, []);Voir exemple ci-dessous :