我不能告诉为什么这里有一个无限循环，在这个作出反应的代码材料UI格

我有无限循环，在这个码,但是我不能告诉为什么，

import React, { useEffect, useState } from 'react';
import VideoCardComponent from './VideoCard';
import Grid from '@mui/material/Grid';
import { connect } from 'react-redux';
import { getVideos } from '../redux/actions/videosActions&Consts';
import { Typography } from '@mui/material';

const Content = ({ getVideos, videos, loaded }) => {
    const [ currentGroup, setCurrentGroup ] = useState('');
    const [ printCurrentGroup, setPrintCurrentGroup ] = useState(true);
    const [ firstTime, setFirstTime ] = useState(true);
    useEffect(() => {
        if (!loaded) {
            getVideos();
        }
    }, []);

    const getVideoCard = (videoObj) => {
        console.log(videoObj);
        if (firstTime) {
            setFirstTime(false);
            setCurrentGroup(videoObj.category_name);
        } else {
            if (videoObj.category_name !== currentGroup) {
                setPrintCurrentGroup(true);
                setCurrentGroup(videoObj.category_name);
            } else {
                if (printCurrentGroup) setPrintCurrentGroup(false);
            }
        }
        return (
            <Grid item xs={4}>
                {printCurrentGroup ? <Typography variant="h4">{videoObj.category_name}</Typography> : null}
                <VideoCardComponent {...videoObj} />
            </Grid>
        );
    };
    console.log('videos: ', videos);
    return (
        <Grid container spacing={1}>
            {videos.map((videoObj) => {
                return getVideoCard(videoObj);
            })}
        </Grid>
    );
};

function mapStateToProps(state) {
    return {
        videos: state.videosReducer.videos,
        loaded: state.videosReducer.loaded
    };
}

function mapDispatchToProps(dispatch) {
    return {
        getVideos: () => {
            return dispatch(getVideos());
        }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Content);

视频是一系列的7的对象 通过设定状态变量我得到的无限循环

        if (firstTime) {
            setFirstTime(false);
            setCurrentGroup(videoObj.category_name);
        } else {
            if (videoObj.category_name !== currentGroup) {
                setPrintCurrentGroup(true);
                setCurrentGroup(videoObj.category_name);
            } else {
                if (printCurrentGroup) setPrintCurrentGroup(false);
            }
        }

代码显示这部分是这样的

        <Provider store={configStore}>
            <Grid container direction="column">
                <Grid item>
                    <Header />
                </Grid>
                <Grid item container>
                    <Grid item xs={2} />
                    <Grid item container>
                        <Content />
                    </Grid>
                </Grid>
                <Grid item xs={2} />
            </Grid>
        </Provider>

我怎么可以设置这些国家变量，而不会导致重新呈现 在此先感谢

拉斐尔