NaN值在服务器端打印出来，而不是在客户端上打印，但正在以Next JS样式将值设置为NaN

如何解决NaN值在服务器端打印出来，而不是在客户端上打印，但正在以Next JS样式将值设置为NaN

导出功能BannerSlider（{defaultBackground，图像，子项，customHeight，全尺寸，视差}）{

const getwindow = useWindowSize();
const bannerWidth = getwindow.width;
const getScroll = useScroll();
const defaultSize = 600;
const [currentSlide,setCurrent] = useState(0);

const leftClick = (e) => {
    var nextSlide = currentSlide - 1;
    if(nextSlide < 0) {
        setCurrent(images.length - 1)
    } else {
        setCurrent(nextSlide)
    }
}

const rightClick = (e) => {
    var nextSlide = currentSlide + 1;
    if(nextSlide > images.length - 1) {
        setCurrent(0)
    } else {
        setCurrent(nextSlide)
    }
}

return (
    <div id='banner'>
        <div className='imgcont'>
            {images == null ? null: images.map((image,i) => {
                const posLeft = (i * bannerWidth) + (bannerWidth / 2) - (currentSlide * bannerWidth);
                console.log(i * bannerWidth + (bannerWidth / 2))
                return (
                    <img left={posLeft} key={i} className='singleimage' src={image} style={{top: parallax == true && getScroll.scrollY >=0 ? (((fullsize == true ? getwindow.height: customHeight) / 2) - (getScroll.scrollY / 3)) || 0: '50%'}}/>
                )
            })}
        </div>
        <div className='dots'>
            {images == null ? null: images.map((image,i) => {
                return <div style={{background: currentSlide == i ? 'white': 'rgba(255,255,.6)'}} key={i} className='dot' onClick={() => setCurrent(i)}></div>
            })}
        </div>
        <img onClick={leftClick} className='arrow' style={{left: 40}} src={'/logo_arrow_left.png'} />
        <img onClick={rightClick}  className='arrow right' style={{right: 40}} src={'/logo_arrow_left.png'} />
        <div className='content'>{children}</div>
        <style jsx>{`
            #banner {
                float: left;
                width: 100%;
                position: relative;
                overflow: hidden;
                background: ${defaultBackground};
                height: ${customHeight ? customHeight: (fullsize == true ? getwindow.height: defaultSize)}px;
            }
            .dots {
                position: absolute;
                min-width: 40px;
                bottom: 20px;
                left: 50%;
                backdrop-filter: blur(12px);
                background: rgba(255,.4);
                padding: 5px;
                border-radius: 10px;
                transform: translateX(-50%);
                z-index: 12;
            }
            .dot {
                float: left;
                width: 14px;
                height: 14px;
                Box-shadow: 0 0 2px rgba(20,20,.4);
                border-radius: 50%;
                cursor: pointer;
                transition: all .3s ease;
                margin: 0 5px;
            }
            .arrow {
                position: absolute;
                width: 50px;
                height: 50px;
                top: 50%;
                padding: 10px;
                z-index: 12;
                opacity: .4;
                transition: all .3s ease;
                backdrop-filter: blur(18px);
                background: rgba(255,.6);
                border-radius: 50%;
                cursor: pointer;
                transform: translateY(-50%);
            }
            .arrow:hover {
                opacity: 1;
            }
            .right {
                transform: translateY(-50%) rotateY(180deg);
            }
            .imagecont {
                float: left;
                min-width: 100%;
                height: 100%;
                transition: all .4s ease;
            }
            .singleimage {
                position: absolute;
                width: 100%;
                z-index: 10;
                transition: all .3s ease;
                transition: left .8s ease;
                transform: translate(-50%,-50%);
            }
            @media only screen and (max-width: 800px) {
            } 
            @media only screen and (max-width: 1100px) {
            }
        `}</style>
    </div>
)

} 这是在服务器端打印出来的内容，我想弄清楚为什么它没有在第一页加载时挂载，我试图编译该项目以查看这是否有助于区分服务器和客户端，但这并没有工作。如果有人对这个问题有任何见识，那就太好了。

NaN
NaN
NaN
Warning: Received NaN for the `left` attribute. If this is expected,cast the value to a string.
    in img (at banner.js:76)
    in div (at banner.js:71)
    in div (at banner.js:70)
    in BannerSlider (at pages/index.js:19)
    in div (at pages/index.js:18)
    in div (at context.js:143)
    in Layout (at pages/index.js:10)

但在实际窗口上...数字可正确打印并将其值设置为NaN。非常困惑，任何帮助都将不胜感激，我在使用带有响应的Next JS

510
1530
2550
react-dom.development.js?61bb:88 Warning: Prop `left` did not match. Server: "NaN" Client: "510"
    in img (at banner.js:76)
    in div (at banner.js:71)
    in div (at banner.js:70)
    in BannerSlider (at pages/index.js:19)
    in div (at pages/index.js:18)
    in div (at context.js:143)
    in Layout (at pages/index.js:10)
    in Index (created by App)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root