需要带有 react nextjs 的屏幕尺寸，但返回“错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。\”答案

【问题标题】：Need screen dimension with react nextjs but returning "Error: Hydration failed because the initial UI does not match what was rendered on the server."需要带有 react nextjs 的屏幕尺寸，但返回“错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。\”
【发布时间】：2022-10-24 09:53:58
【问题描述】：

我正在尝试获取窗口尺寸，但它总是返回“错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。”

const hasWindow = typeof window !== 'undefined';



function getWindowDimensions() {
    const width = hasWindow ? window.innerWidth : null;
    const height = hasWindow ? window.innerHeight : null;
    return {
      width,
      height,
    };
  }

  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    if (hasWindow) {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }


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

setWidth(windowDimensions.width);

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

需要使用钩子，只需将 setWidth 移到 useEffect 中即可。

useEffect(() => {
    if (hasWindow) {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }

      window.addEventListener('resize', handleResize);

      setWidth(windowDimensions.width);
      return () => window.removeEventListener('resize', handleResize);
    }
  }, [hasWindow]);

【讨论】：