React 鈎子上缺少依賴項 linting 錯誤

Question

我在 React function 組件中使用useEffect ，如下所示：

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    userInterface.dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
}, []);

useEffect 上的第二個（數組）選項給了我以下useEffect錯誤：

React Hook useEffect has a missing dependency: 'userInterface'. Either include it or remove the dependency array. eslint(react-hooks/exhaustive-deps)

我認為 linting 錯誤中的任何一個選項都不正確。

• 我只想初始化一次事件監聽器。
• 如果我刪除數組選項， useEffect將表現得像componentDidUpdate並且可以多次執行代碼
• 如果我將userInterface添加為對useEffect的依賴項，如果該上下文更新，它也會多次執行代碼

我在這里遺漏了什么還是棉絨迫使我寫出不正確的邏輯？

我會在這一個實例中禁用該規則，但我的應用程序中有 4 個其他類似錯誤的實例。

Answer 1

eslint 錯誤是有原因的，這是為了防止由於陳舊值而難以注意到的錯誤。 本質上，lint 錯誤只是告訴您，您的 userInterface 變量將在效果中過時。

忽略該錯誤不一定是一個好主意，因為如果您添加更多依賴項，您可能不會意識到為什么事情沒有像您期望的那樣更新。

關於同一件事的另一篇文章：

useEffect 依賴數組和 ESLint 窮舉-deps 規則

https://github.com/facebook/create-react-app/issues/6880

您應該記住的一件主要事情是確保清理您的操作，無論它是否僅在安裝時完成，因為如果您不清理它，有時效果可能會超出組件的生命周期。

你有幾個不同的選項來解決這個問題，如果調度是穩定的（基於名稱，它通常是穩定的），那么你可以從 userInterface 變量中提取調度，然后將它添加到依賴數組中。

const { dispatch } = userInterface;

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
  () => {
    Router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, [dispatch]);

如果提取調度值不是一個選項，那么您可以使用 ref 來確保以穩定的方式保持最新版本的 userInterface。 有時這是一項足夠常見的任務，您可能希望將邏輯提取到自定義掛鈎以獲取值的引用。

const userInterfaceRef = useRef(userInterface);
useEffect(() => {
  userInterfaceRef.current = userInterface;
}, [userInterface]);

useEffect(() => {
  const handleRouteChangeComplete = () => {
    window.scrollTo(0, 0);
    userInterfaceRef.current.dispatch(closeNavigation());
  };

  Router.events.on('routeChangeComplete', handleRouteChangeComplete);
  () => {
    Router.events.off('routeChangeComplete', handleRouteChangeComplete);
  };
}, []);

這里看似額外的 useEffect 的原因是因為除非您確定 userInterface 永遠不會更改，否則您需要保持它是最新的，否則 userInterfaceRef 將過時。 我制作 userInterface 的 ref 而不是調度 function 的原因是因為這樣您可以在效果中使用 userInterface 的其他屬性而不會出現任何問題。

如果您需要在效果中包含不想重新啟動效果的依賴項，請使用我描述的 ref 選項來確保您擁有最新的值，而無需在每次更改時重新運行效果。

如果您在效果中強制添加 on 處理程序，您應該確保清理它。 養成一個好習慣。