Reactjs 自动化幻灯片放映以防止React中重复过多的正确方法是什么

发布于05月02日

我确信我只是有点愚蠢，但我一生都想不明白这一点.我正在使用SWR从api路径获取一些数据(id、标题、幻灯片等)，进展顺利.我计划获取我的数据.幻灯片并创建一个简单的动画幻灯片，只需每5秒前进到下一张幻灯片即可.我以为我可以使用useEffect和setInterval来处理幻灯片，但最终(23之后)，我点击了"太多重新渲染".

    const { slideshow, isError, isLoading } = useSlideshow();
    const [currentSlide, setCurrentSlide] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentSlide((prevSlide) => (prevSlide + 1) % (slides?.length ?? 0));
            console.log("currentSlide", currentSlide);
        }, 500);

        return () => clearInterval(interval);
    }, [slides.length, currentSlide]);

我确信我错过了什么，但我很困惑.如何防止在继续浏览幻灯片的同时过度重新渲染？

const [currentSlide, setCurrentSlide] = useState(0); useEffect(() => { const interval = setInterval(() => { setCurrentSlide((prevSlide) => (prevSlide + 1) % (slides?.length ?? 0)); }, 5000); // 5000ms => 5s return () => clearInterval(interval); }, [slides.length]); useEffect(() => { console.log("currentSlide", currentSlide); }, [currentSlide]);

Reactjs 自动化幻灯片放映以防止React中重复过多的正确方法是什么

推荐答案

Reactjs相关问答推荐

阻止在ShadCN和React中的FormLabel中添加 colored颜色

For循环中的元素在Reaction中丢失挂钩

UseEffect和useSelector的奇怪问题导致无限循环

更改购物车中的产品数量后，PayPal Reaction/Next JS按钮未更新

NextJS如何正确保存添加到购物车中的产品会话

如何在与AntD的react 中限制文件上传和显示消息？

未定义发送的数据无法在reactjs中找到原因

根据用户 Select 的注册类型更改表单字段

Chart.js如何go 除边框

tRPC/react-query，在所有查询完成之前，组件不会收到任何 useQuery 的结果

当从子状态更改复制时，react 父状态更改.我该如何防止这种情况？

如何测试根据 prop 更改 CSS 属性的 useEffect 钩子？

如何在 React Native 中渲染下面的对象数组？

Syncfusion：带有 TabItemsDirective 的选项卡组件不显示任何内容

Spring Boot + React + MySQL应用的架构层面有哪些？

从 React 应用程序调用未经身份验证的 graphql 查询时出现错误：没有当前用户

为嵌套路由配置一个不存在的 url 的重定向

在复选框中react 检索选中的值

如何在 JSX 中使用 -webkit- 前缀？

我在使用 Elements of stripe 时使用 React router v6