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

将

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

在localhost上可以正常工作。部署（Netlify）后，此组件将渲染两次，但是在第二次渲染之后，它将保留第一次渲染时的信息。是什么导致在localhost和部署后外观上的差异？

功能组件仅在部署后呈现两次

0 个答案: