javascript - 功能组件仅在部署后渲染两次

Question

我有根据窗口宽度呈现 Slider 的功能组件：

const Works = (props) => {
  const size = useWindowWidth()
  const codeWorksArray = CodeWorksQuery()
  const mapWorksArray = MapWorksMetadata()

  const setSliderItems = (width) => {
    if (width > config.deviceWidths.medium) {
      return 4
    } else if (width >= config.deviceWidths.small) {
      return 2
    } else {
      return 1
    }
  }
...

<Slider sliderElements={mapWorksSliderItems} slidesCount={setSliderItems(size.width)}/>

useWindowWidth()是一个获取窗口尺寸并处理调整大小监听器的钩子：

import { useState, useEffect } from "react"

const useWindowWidth = () => {
  const isWindowAvailable = typeof window !== "undefined"

  const getSize = () => {
    return {
      width: isWindowAvailable ? window.innerWidth : undefined,
      height: isWindowAvailable ? window.innerHeight : undefined
    };
  }

  const [windowSize, setWindowSize] = useState(getSize)

  useEffect(() => {
    if (!isWindowAvailable) {
      return false
    }

    const handleResize = () => {
      setWindowSize(getSize())
    }

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

  return windowSize
}

export default useWindowWidth

slidesCountvalue 作为 props 传递给Slider，并计算组件内每个滑块项的宽度。问题是一旦部署滑块只有一个元素（而不是桌面上的 4 个）。似乎只有在调整大小后才会更新。

在本地主机上这工作正常。在部署 (Netlify) 之后，此组件会渲染两次，但在第二次渲染后，它会保留第一次渲染的信息。是什么导致 localhost 和部署后的外观不同？

标签： javascriptreactjsreact-hooksgatsby