fix: Исправлена навигация назад через useCallback
- Обернул nextStep, prevStep, updateFormData, handleSubmit в useCallback - Теперь функции стабильны и не пересоздаются при ререндере - nextStep и prevStep используют functional update для setState - Добавлено логирование навигации: '⏩ nextStep' и '⏪ prevStep' - Исправлены зависимости useMemo для steps ПРОБЛЕМА: prevStep вызывался, но setCurrentStep не обновлял стейт РЕШЕНИЕ: useCallback гарантирует что функции стабильны
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useState, useMemo, useCallback } from 'react';
|
||||
import { Steps, Card, message, Row, Col } from 'antd';
|
||||
import Step1Policy from '../components/form/Step1Policy';
|
||||
import Step2EventType from '../components/form/Step2EventType';
|
||||
@@ -92,19 +92,27 @@ export default function ClaimForm() {
|
||||
});
|
||||
});
|
||||
|
||||
const updateFormData = (data: Partial<FormData>) => {
|
||||
setFormData({ ...formData, ...data });
|
||||
};
|
||||
const updateFormData = useCallback((data: Partial<FormData>) => {
|
||||
setFormData((prev) => ({ ...prev, ...data }));
|
||||
}, []);
|
||||
|
||||
const nextStep = () => {
|
||||
setCurrentStep(currentStep + 1);
|
||||
};
|
||||
const nextStep = useCallback(() => {
|
||||
console.log('⏩ nextStep called');
|
||||
setCurrentStep((prev) => {
|
||||
console.log('📍 Current step:', prev, '→ Next:', prev + 1);
|
||||
return prev + 1;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const prevStep = () => {
|
||||
setCurrentStep(currentStep - 1);
|
||||
};
|
||||
const prevStep = useCallback(() => {
|
||||
console.log('⏪ prevStep called');
|
||||
setCurrentStep((prev) => {
|
||||
console.log('📍 Current step:', prev, '→ Prev:', prev - 1);
|
||||
return prev - 1;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const handleSubmit = useCallback(async () => {
|
||||
try {
|
||||
addDebugEvent('form', 'info', '📤 Отправка заявки на сервер');
|
||||
|
||||
@@ -151,7 +159,7 @@ export default function ClaimForm() {
|
||||
addDebugEvent('form', 'error', '❌ Ошибка соединения');
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
}, [formData, claimId, sessionId, addDebugEvent]);
|
||||
|
||||
// Динамически генерируем шаги на основе выбранного eventType
|
||||
const steps = useMemo(() => {
|
||||
@@ -226,7 +234,7 @@ export default function ClaimForm() {
|
||||
});
|
||||
|
||||
return stepsArray;
|
||||
}, [formData, documentConfigs, isPhoneVerified]);
|
||||
}, [formData, documentConfigs, isPhoneVerified, claimId, sessionId, nextStep, prevStep, updateFormData, handleSubmit, setIsPhoneVerified, addDebugEvent]);
|
||||
|
||||
const handleReset = () => {
|
||||
setFormData({
|
||||
|
||||
Reference in New Issue
Block a user