如何解决React 限制渲染次数以防止无限循环 - react hooks
我有一个简单的部分,其中包含一个光滑的滑块,我想单击按钮,例如按钮 1,它应该打开特定的幻灯片。
这是关于 codeandBox slick go to slide
的现场演示这里是js代码
import React,{ useRef,useState,useEffect } from "react";
import Slider from "react-slick";
export default function APP() {
const sliderRef = useRef();
const [slideIndex,setSlideIndex] = useState(0);
var settings = {
dots: true
};
useEffect(() => {
sliderRef.current.slickGoTo(slideIndex);
},[slideIndex]);
return (
<div className="container">
<Slider {...settings} ref={sliderRef}>
<div>
<img src="http://placekitten.com/g/400/200" />
<button onClick={setSlideIndex(0)}>btn 1</button>
<button onClick={setSlideIndex(1)}>btn 2</button>
<button onClick={setSlideIndex(2)}>btn 3</button>
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
<div>
<img src="http://placekitten.com/g/400/200" />
</div>
</Slider>
</div>
);
}
但我收到以下错误
Too many re-renders. React limits the number of renders to prevent an infinite loop
这里出了什么问题?
解决方法
您的 onClick
道具应该是函数,而不是函数调用。
所以这个
onClick={setSlideIndex(0)}
应该是这样的:
onClick={() => setSlideIndex(0)}
按照您现在的方式,该函数在组件呈现时被调用。并且该函数更改状态,这会导致重新渲染,再次调用该函数,触发状态更改等 -> 无限循环
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。