如何在页面加载时设置 useState 挂钩的 state？

Question

我正在尝试创建一个响应式导航。 它有一个 _ 功能：

1. 在页面加载时在屏幕宽度 > 768px 上显示导航链接
2. 页面加载时屏幕宽度 < 768px 不显示导航链接
3. 如果在切换到大屏幕时在小屏幕上未打开，则关闭导航（简单地说，如果用户在移动设备上打开导航链接，切换到更大的屏幕尺寸，然后返回移动设备，导航链接应该再次隐藏）

我完成了 99% 的工作，但我认为我这样做是因为当我在较小的屏幕上时，导航会在短时间内链接 flash，然后消失。 这显然不是我想要的。

下面是一个精简的、非样式化的代码段，以便于调试：

export const Nav = () => {
  const [showNavOnClick, setShowNavOnClick] = useState(false)
  const [hamburgerOpen, setHamburgerOpen] = useState(false)
  const [showNavOnScreenSize, setShowNavOnScreenSize] = useState(true)

  const toggleMenu = () => {
    setShowNavOnClick(!showNavOnClick)
    setHamburgerOpen(!hamburgerOpen)
  }

  useEffect(() => {
    // This line solves all 3 goals, but on page load, the nav links appear, then dissapear in a split moment. 
    if (window.innerWidth < 768) setShowNavOnScreenSize(false)

    const handleResize = () => {
      if (window.innerWidth > 768) {
        setShowNavOnScreenSize(true)
        setShowNavOnClick(false)
      } else if (window.innerWidth < 768) {
        setShowNavOnScreenSize(false)
      }
    }

    window.addEventListener('resize', handleResize)

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

  return (
    <nav>
      <a href="/">Home</a>
      <button onClick={toggleMenu}>*</button>
      <a
        href="/about"
        className={`${
          showNavOnScreenSize ||
          showNavOnClick && showNavOnScreenSize != showNavOnClick)
            ? 'visible'
            : 'hidden'
        }`}>
        About
      </a>
    </nav>
  )
}

以下是显示故障的视频：

当我添加const [showNavOnScreenSize, setShowNavOnScreenSize] = useState(window.innerWidth >= 768)时，我收到window is not defined的错误

Answer 1

您可以通过更改 state 的默认值来解决此问题，该值是根据宽度计算的，而不是硬编码的true ：

const [showNavOnScreenSize, setShowNavOnScreenSize] = useState(window.innerWidth >= 768)

如有必要，您可以以类似的方式为其他状态设置默认值。

编辑：或者，尝试使用布局效果，以便重新渲染是同步的：

const [showNavOnScreenSize, setShowNavOnScreenSize] = useState(true)

useLayoutEffect(() => {
    if (window.innerWidth < 768) setShowNavOnScreenSize(false)
    // ...