如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。