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]);
|
||||
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user