ReactJS - La fonction de retour de hook personnalisée ne stocke pas les données réelles de l'état interne

Question

J'ai un hook personnalisé useNotifications pour 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 notification
• remove : Fonction pour obtenir l'ID de notification et supprimer la notification
• contextHandler : JSX passé au rendu des composants

Lorsque l'utilisateur appelle add, 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 fait setTimeout，它在3秒内调用了remove()) : https://codesandbox.io/s/goofy-smoke-5q7dw3?file=/src/App.js:405-440

Answer 1

Vous pouvez créer votre remove 函数使用 状态更新器功能，可以访问最新的状态值。这允许您在组件在 remove() 中重新渲染之前访问新的 list statut.

Remarque : Vous modifiez actuellement l'état d'origine en modifiant le isMounted 属性设置为 false de 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 :