In the project I developed with React, I want to capture user information and send it to Redux when the page is entered for the first time, but when I issue dispatch after capturing the data, the page enters an infinite loop. How can I prevent this?
export default ProfileDetailView;
This is my Code :
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { SET_CANDIDATE_PROFILE_DETAILS } from '@/store/modules/candidate';
import CareerGoalSection from '@/components/profilDetail/CareerGoalSection';
import DocumentSection from '@/components/profilDetail/DocumentSection';
import EducationSection from '@/components/profilDetail/EducationSection';
import LanguageSection from '@/components/profilDetail/LanguageSection';
import ProfilCardSection from '@/components/profilDetail/ProfilCardSection';
import ReferencesSection from '@/components/profilDetail/ReferencesSection';
import SkillsSection from '@/components/profilDetail/SkillsSection';
import WorkExperienceSection from '@/components/profilDetail/WorkExperienceSection';
import ProfilDetailLayout from '@/layouts/ProfilDetailLayout';
import { useTranslation } from 'react-i18next';
import { authSelector } from '@/store/modules/auth';
import { candidateService } from '@/services/candidate.service';
interface ProfileDetailViewProps {
hideNavFooter: boolean;
}
const ProfileDetailView: React.FC<ProfileDetailViewProps> = ({ hideNavFooter }) => {
const { t } = useTranslation();
const { decodedToken } = useSelector(authSelector);
const candidateId = Number(decodedToken?.CandidateId);
const dispatch = useDispatch();
const getProfileDetails = async () => {
try {
const details = await candidateService.fetchCandidateProfileDetails(candidateId);
dispatch(SET_CANDIDATE_PROFILE_DETAILS(details));
} catch (error) {
console.error('Error fetching profile details:', error);
}
};
useEffect(() => {
if (candidateId) {
getProfileDetails();
}
}, [candidateId]);
return (
<ProfilDetailLayout title={t('profileDetails.name')} showNavAndFooter={!hideNavFooter}>
<ProfilCardSection />
<CareerGoalSection />
<WorkExperienceSection/>
<EducationSection/>
<LanguageSection/>
<SkillsSection/>
<DocumentSection />
<ReferencesSection />
</ProfilDetailLayout>
);
};