reactjs - 反应忽略 useMobileDetection 自定义挂钩返回值，除非调整大小

Question

我写了一个钩子

import { useState, useEffect } from 'react';

export function useMobileDetection(breakPoint) {
  const windowWidth = typeof window !== 'undefined' && window.innerWidth;
  const [isInMobile, setIsInMobile] = useState(windowWidth < breakPoint);

  const handleWindowResize = () =>
    setIsInMobile(window.innerWidth < breakPoint);
  useEffect(() => {
    window.addEventListener('resize', handleWindowResize);
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  return isInMobile;
}

并且在下面提到的组件中，当我使用它时，它始终默认为 true，无论我是否在移动断点中，当我在开发工具中检查它时，并且我在移动视图中它显示为 true，当我不在页面加载的移动视图中，它在开发工具中显示为 false，但依赖于代码中该值的所有条件的行为就像我实际上在移动视图中一样。除非我将屏幕大小调整为移动断点，否则它会命中“正确”，当我调整回桌面时，它会显示“正确错误”并且所有条件类都正确显示。有人可以解释这种行为吗？这是组件

const NavItem = ({ children, color, setActiveItem, activeItem }) => {
  const current = activeItem === children;
  const isInMobile = useMobileDetection(991);
  return (
    <div
      onMouseEnter={() => setActiveItem(children)}
      className={`col-md-6 col-lg-auto py-3 py-lg-0 d-${
        isInMobile ? 'flex' : 'block'
      }`}
    >
      <p className="mb-1">
        <a
          style={{
            borderTop: current ? `5px solid ${color}` : '',
          }}
          href="#"
          className={`h4 text-${current ? 'dark' : 'muted'} py-2`}
        >
          {children}
        </a>
      </p>
      {!isInMobile ? (
        <p className="mb-0 text-center">
          <i
            className={`fas fa-chevron-down fa-sm text-300 ${
              current ? '' : 'd-none'
            }`}
            aria-hidden="true"
          ></i>
        </p>
      ) : (
        <p className="mb-0">
          <i
            className={`fas fa-chevron-right fa-sm text-300 mx-2 ${
              current ? '' : 'd-none'
            }`}
            aria-hidden="true"
          ></i>
        </p>
      )}
    </div>
  );
};

谢谢！

标签： reactjsreact-hooks