ReactJS - 自訂掛鉤傳回函數不儲存內部狀態的實際數據

Question

我有一個用於通知小部件的自訂掛鉤useNotifications。這個鉤子傳回一個包含下一個元素的陣列（它類似於 ant.design 訊息 api）：

• add：新增通知的函數
• remove：取得通知 ID 並刪除通知的函數
• contextHandler：傳遞到元件渲染的 JSX

#當使用者呼叫add時，他們會獲得一個可用於刪除通知的ID

該問題專門針對刪除功能。由於我在新增通知後立即呼叫此函數，因此該函數會收到舊清單的副本，因此沒有新元素，並且會引發錯誤。我該如何修復它，以便元件使用相同的 API？

useNotification 鉤子 我如何使用它

Codesandbox（為了測試，我做了setTimeout，它在3秒內呼叫了remove()）：https://codesandbox.io/s/goofy-smoke -5q7dw3?檔案=/src/App.js:405-440

Answer 1

您可以讓您的 remove 函數使用 狀態更新器功能，可以存取最新的狀態值。這允許您在元件在 remove() 中重新渲染之前存取新的 list 狀態。

注意：您目前正在透過將嵌套物件的 isMounted 屬性設為 false 來改變原始狀態。即使您複製了數組，您也應該複製正在更新的對象，以避免重新渲染問題。

以下是有關如何存取狀態的最新值並避免狀態突變的一些修改：

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);
}, []);

請參考下面的範例：