如何在 React 和 Next.js 的 useEffect 中跟蹤依賴列表中未定義變量的值

Question

我還有一個問題：

我想跟蹤一些未定義變量window的字段，但將來會定義。

例如，如果變量window的內部字段將被更改，我想做一些代碼。

useEffect(() => {
    if (window && window.innerWidth) {
        // Do something
    }
}, [window.innerWidth])

但是 next.js 和反應寫如下：

如何達到這個效果？ 感謝您的任何建議。

Answer 1

此解決方案適用於您的用例。

所以我們有 2 個useEffect鈎子。

第一個useEffect將事件偵聽器附加到window object。 因為window用於useEffect掛鈎，所以它不會在服務器端執行。

第二個useEffect掛鈎將偵聽 state 對innerWidth的更改，每當發生resize事件時都會更新。

  const [innerWidth, setInnerWidth] = useState<number | undefined>();

  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      setInnerWidth(window.innerWidth);
    }

    // Add event listener
    window.addEventListener('resize', handleResize);
    // Call handler right away so state gets updated with initial window size
    handleResize();
    return () => window.removeEventListener('resize', handleResize);
  }, []); 

  useEffect(() => {
    // Handle your changes
    console.log(innerWidth);
  }, [innerWidth]);

  

受此useWindowResize 實現的啟發

Answer 2

您可以嘗試使用 process.browser 僅在客戶端渲染期間執行您的命令。

   if (typeof window !== "undefined") { //client side code } 

/*OR TRY THIS */
/*Remove dependency array*/
useEffect(() => {
    if (window && window.innerWidth) {
        // Do something
    }
}, [])