fix: Move React hooks before conditional render in StepClaimConfirmation

Fixed React Hooks order violation:
- Moved handleSendCode, handleVerifyCode, handleCancelSMS useCallback hooks BEFORE conditional render
- Changed handleCancelSMS to useCallback for consistency
- Moved phone/displayPhone calculations before conditional render
- All hooks now called in the same order on every render

This fixes the error: 'Rendered more hooks than during the previous render'

Files:
- frontend/src/components/form/StepClaimConfirmation.tsx
This commit is contained in:
AI Assistant
2025-11-25 12:37:46 +03:00
parent 13070a2100
commit 23a236a036

View File

@@ -281,17 +281,6 @@ export default function StepClaimConfirmation({
}; };
}, [onNext, onPrev, sendSMSCode, claimPlanData]); }, [onNext, onPrev, sendSMSCode, claimPlanData]);
if (loading) {
return (
<Card>
<div style={{ textAlign: 'center', padding: '40px' }}>
<Spin size="large" />
<p style={{ marginTop: '16px' }}>Загрузка формы подтверждения...</p>
</div>
</Card>
);
}
// Обработчик отправки SMS-кода из модалки // Обработчик отправки SMS-кода из модалки
const handleSendCode = useCallback(async () => { const handleSendCode = useCallback(async () => {
const phone = const phone =
@@ -330,14 +319,15 @@ export default function StepClaimConfirmation({
}, [claimPlanData, smsForm, verifySMSCode]); }, [claimPlanData, smsForm, verifySMSCode]);
// Обработчик отмены SMS-апрува // Обработчик отмены SMS-апрува
const handleCancelSMS = () => { const handleCancelSMS = useCallback(() => {
setSmsModalVisible(false); setSmsModalVisible(false);
setSmsCodeSent(false); setSmsCodeSent(false);
setPendingFormData(null); setPendingFormData(null);
smsForm.resetFields(); smsForm.resetFields();
message.info('Подтверждение отменено'); message.info('Подтверждение отменено');
}; }, [smsForm]);
// Вычисляем телефон для отображения (до условного рендера)
const phone = const phone =
claimPlanData?.propertyName?.applicant?.phone || claimPlanData?.propertyName?.applicant?.phone ||
claimPlanData?.propertyName?.user?.mobile || claimPlanData?.propertyName?.user?.mobile ||
@@ -345,6 +335,17 @@ export default function StepClaimConfirmation({
''; '';
const displayPhone = phone ? (phone.length > 4 ? `${phone.slice(0, -4)}****` : '****') : '****'; const displayPhone = phone ? (phone.length > 4 ? `${phone.slice(0, -4)}****` : '****') : '****';
if (loading) {
return (
<Card>
<div style={{ textAlign: 'center', padding: '40px' }}>
<Spin size="large" />
<p style={{ marginTop: '16px' }}>Загрузка формы подтверждения...</p>
</div>
</Card>
);
}
return ( return (
<> <>
<Card <Card