时间戳

首页 > 解决方案 > ReactJS UseEffect 方法中的渲染循环问题

reactjs - ReactJS UseEffect 方法中的渲染循环问题

问题描述

嗨，我是 ReactJs 的新开发人员。我对 useEffect 渲染有疑问。我有一个示例，我正在尝试随时间更改背景图像，但是 useEffect 使渲染变得如此之多，并且我的背景图像随着时间保持在一个循环中。我只想按照 bg1 bg2 bg3 等顺序更改图像。如何解决这个无限渲染？

我的例子 .tsx

import React, { useEffect, useState } from 'react';
import { connect } from "../../../store/store";

const LeftPart = (props: any) => {

     const [value, setValue] = useState(1);
     const {loginLeftImagesLength} = props;
     const changeLeftBackgroungImage : any = () =>{
        const interval = setInterval(() => {
            if (value <= loginLeftImagesLength.payload) {
                setValue(value+1);
            } else{
                setValue(1);
            }
        }, 3000);
        return () => clearInterval(interval);
     };

     useEffect(() => {
        changeLeftBackgroungImage();
    });

    return (

        <div className="col-xl-7 col-lg-7 col-md-7 col-sm col-12">
            <img id="image" src={"../../../assets/images/bg"+value+".jpg"} style={{ width: "100%", height: "99vh" }} alt="Login Images"></img>
        </div >
    )
}

export default connect((store: any) => ({ loginLeftImagesLength: store.loginLeftImagesLength }))(LeftPart) as any;

标签： reactjs

解决方案

你有无限渲染，因为你没有在你的useEffect

useEffect(() => {
        changeLeftBackgroungImage();
},[]); // Will run this hook on component mount.

你也可以这样做

useEffect(()=>{
  const timer = setTimeout(()=>{
    if (value <= loginLeftImagesLength.payload) {
                setValue(value+1);
            } else{
                setValue(1);
            }
  },3000)
  return ()=>{ // Return this function from hook which is called before the hook runs next time
    clearTimeout(timer)
  }
},[,value]) // RUN THIS HOOK ON componendDidMount and whenever `value` changes

推荐阅读