fix: prevent multiple initialization and state race condition in PopoutPage

- Use useRef to prevent multiple initializations
- Remove selectFile call that may cause state race condition
- Directly update store without selectFile to preserve isEditing state
This commit is contained in:
2026-03-22 00:16:22 +08:00
parent 3b1f99951e
commit 69bd91797d

View File

@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'
import { useEffect, useState, useRef } from 'react'
import { useSearchParams } from 'react-router-dom'
import type { FileItemDTO } from '@shared/types/file'
import { matchModule } from '@/lib/module-registry'
@@ -11,15 +11,14 @@ import { useTabStore } from '@/stores'
export const PopoutPage = () => {
const [searchParams] = useSearchParams()
const [file, setFile] = useState<FileItemDTO | null>(null)
const [content, setContent] = useState<string>('')
const [unsavedContent, setUnsavedContent] = useState<string>('')
const [isEditing, setIsEditing] = useState(false)
const [isMaximized, setIsMaximized] = useState(false)
const [ready, setReady] = useState(false)
const { selectFile } = useTabStore()
const initializedRef = useRef(false)
useEffect(() => {
if (initializedRef.current) return
initializedRef.current = true
const path = searchParams.get('path')
const name = searchParams.get('name')
const contentParam = searchParams.get('content')
@@ -36,55 +35,61 @@ export const PopoutPage = () => {
const decodedUnsaved = unsavedParam ? decodeURIComponent(unsavedParam) : decodedContent
const decodedEditing = editingParam === 'true'
setFile({
const fileObj: FileItemDTO = {
name: decodedName,
path: decodedPath,
type: 'file',
size: 0,
modified: new Date().toISOString(),
})
setContent(decodedContent)
setUnsavedContent(decodedUnsaved)
setIsEditing(decodedEditing)
}
useTabStore.setState((state) => {
const newTabs = new Map(state.tabs)
newTabs.set(decodedPath, {
file: {
name: decodedName,
path: decodedPath,
type: 'file' as const,
size: 0,
modified: new Date().toISOString(),
},
content: decodedContent,
unsavedContent: decodedUnsaved,
isEditing: decodedEditing,
loading: false,
loaded: true,
setFile(fileObj)
const existingTab = useTabStore.getState().tabs.get(decodedPath)
if (!existingTab) {
useTabStore.setState((state) => {
const newTabs = new Map(state.tabs)
newTabs.set(decodedPath, {
file: fileObj,
content: decodedContent,
unsavedContent: decodedUnsaved,
isEditing: decodedEditing,
loading: false,
loaded: true,
})
return {
tabs: newTabs,
activeTabId: decodedPath,
}
})
return {
tabs: newTabs,
activeTabId: decodedPath,
}
})
selectFile({
name: decodedName,
path: decodedPath,
type: 'file',
size: 0,
modified: new Date().toISOString(),
})
setReady(true)
} else {
useTabStore.setState((state) => {
const newTabs = new Map(state.tabs)
const existing = newTabs.get(decodedPath)
if (existing) {
newTabs.set(decodedPath, {
...existing,
content: decodedContent,
unsavedContent: decodedUnsaved,
isEditing: decodedEditing,
loaded: true,
})
}
return {
tabs: newTabs,
activeTabId: decodedPath,
}
})
}
window.electronAPI?.windowIsMaximized().then((result) => {
if (result.success) {
setIsMaximized(result.isMaximized)
}
})
}, [searchParams, selectFile])
setReady(true)
}, [searchParams])
const handleMinimize = () => {
window.electronAPI?.windowMinimize()