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