window 调整大小的 React Hook 不更新

Question

我有一个 React Hook，用于在调整大小时设置 window 大小，但它似乎没有更新。任何人都可以阐明为什么这不起作用以及如何在另一个组件中使用此挂钩来设置布尔值以检查 window 大小是否在移动范围内？首先，这是钩子：

    import { useState, useEffect } from 'react';

type WindowSize = {
  width: number,
  height: number,
};

export const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: 0,
    height: 0,
  });

  useEffect(
    () => {
      function handleResize() {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
        console.log(`resizing: width = ${windowSize.width} / height = ${windowSize.height}`);
        // console.log(`resizing: width = ${window.innerWidth} / height = ${window.innerHeight}`);
      }

      window.addEventListener('resize', handleResize);
      handleResize();
      return () => window.removeEventListener('resize', handleResize);
    },
    [],
  );

  return windowSize;
};

在我的应用程序中，我为挂钩设置了一个常量变量：

const {width, height} = useWindowSize();

最初，我注意到这总是只在应用程序启动时设置一次（有时只是 {0,0}）。但后来我注意到挂钩本身并没有在 window 调整大小时在内部更新。

有什么想法吗？

Answer 1

它按预期工作，您只是记录了过时的值。

过时的值是由于关闭分配给 addEventListener 回调的 handleResize 范围内的 windowSize 值。

从 useEffect:

登录查看正确的结果

export const useWindowSize = (): WindowSize => {
  const [windowSize, setWindowSize] = useState<WindowSize>({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    console.log(windowSize);
  }, [windowSize]);

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }

    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
};

https://codesandbox.io/s/react-typescript-forked-cvx0bg?file=/src/App.tsx:546-562
请参阅相关问题 uses of useEffect，其中包含诸如此类的常见“陷阱”。

window 调整大小的 React Hook 不更新

React Hook for window resize doesn't update

typescript

reactjs

react-hooks