fix: replace reset useEffects with key prop for step component remount

The reset useEffects in StepOrientation/Deskew/Dewarp/Crop were clearing
orientationResult when sessionId changed (e.g. during handleOrientationComplete),
causing the right side of ImageCompareView to show nothing. Using key={sessionId}
on the step components instead forces React to remount with fresh state when
switching sessions, without interfering with the upload/orientation flow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Admin
2026-03-24 12:20:50 +01:00
parent 08a91ba2be
commit 63dfb4d06f
6 changed files with 12 additions and 42 deletions

View File

@@ -382,13 +382,13 @@ export default function OcrOverlayPage() {
if (mode === 'paddle-direct' || mode === 'kombi') {
switch (currentStep) {
case 0:
return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
case 1:
return <StepDeskew sessionId={sessionId} onNext={handleNext} />
return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 2:
return <StepDewarp sessionId={sessionId} onNext={handleNext} />
return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 3:
return <StepCrop sessionId={sessionId} onNext={handleNext} />
return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 4:
if (mode === 'kombi') {
return (
@@ -420,13 +420,13 @@ export default function OcrOverlayPage() {
}
switch (currentStep) {
case 0:
return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
case 1:
return <StepDeskew sessionId={sessionId} onNext={handleNext} />
return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 2:
return <StepDewarp sessionId={sessionId} onNext={handleNext} />
return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 3:
return <StepCrop sessionId={sessionId} onNext={handleNext} />
return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 4:
return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
case 5:

View File

@@ -397,13 +397,13 @@ export default function OcrPipelinePage() {
const renderStep = () => {
switch (currentStep) {
case 0:
return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
case 1:
return <StepDeskew sessionId={sessionId} onNext={handleNext} />
return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 2:
return <StepDewarp sessionId={sessionId} onNext={handleNext} />
return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
case 3:
return <StepCrop sessionId={sessionId} onNext={handleCropNext} />
return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleCropNext} />
case 4:
return <StepColumnDetection sessionId={sessionId} onNext={handleNext} onBoxSessionsCreated={handleBoxSessionsCreated} />
case 5: