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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user