fix(ssr): avoid accessing localStorage during SSR initialization
Build and Deploy / Build and Push Docker Image (push) Successful in 1m53s
Build and Deploy / Build and Push Docker Image (push) Successful in 1m53s
- Initialize activeInterconnectNodeId with empty string - Read from localStorage only in client-side - Defer selected state initialization in NodeSwitcher to useEffect
This commit is contained in:
+10
-2
@@ -65,8 +65,16 @@ export interface MonitorStats {
|
|||||||
}[]
|
}[]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export let activeInterconnectNodeId = localStorage.getItem('activeInterconnectNodeId') || ''
|
|
||||||
export let activeInterconnectNodeName = localStorage.getItem('activeInterconnectNodeName') || ''
|
// 初始化时使用空字符串,避免 SSR 时访问 localStorage
|
||||||
|
export let activeInterconnectNodeId = ''
|
||||||
|
export let activeInterconnectNodeName = ''
|
||||||
|
|
||||||
|
// 在客户端初始化时从 localStorage 读取
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
activeInterconnectNodeId = localStorage.getItem('activeInterconnectNodeId') || ''
|
||||||
|
activeInterconnectNodeName = localStorage.getItem('activeInterconnectNodeName') || ''
|
||||||
|
}
|
||||||
|
|
||||||
export function setActiveInterconnectNodeId(id: string, name?: string) {
|
export function setActiveInterconnectNodeId(id: string, name?: string) {
|
||||||
activeInterconnectNodeId = id
|
activeInterconnectNodeId = id
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ import { cn } from '@/lib/utils'
|
|||||||
|
|
||||||
export function NodeSwitcher() {
|
export function NodeSwitcher() {
|
||||||
const [nodes, setNodes] = useState<InterconnectNode[]>([])
|
const [nodes, setNodes] = useState<InterconnectNode[]>([])
|
||||||
const [selected, setSelected] = useState(activeInterconnectNodeId || 'local')
|
const [selected, setSelected] = useState('local')
|
||||||
const [isMaster, setIsMaster] = useState(false)
|
const [isMaster, setIsMaster] = useState(false)
|
||||||
const [open, setOpen] = useState(false)
|
const [open, setOpen] = useState(false)
|
||||||
const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({})
|
const [menuStyle, setMenuStyle] = useState<React.CSSProperties>({})
|
||||||
@@ -22,6 +22,8 @@ export function NodeSwitcher() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setMounted(true)
|
setMounted(true)
|
||||||
|
// 在客户端初始化时从 localStorage 读取选中的节点
|
||||||
|
setSelected(activeInterconnectNodeId || 'local')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const fetchNodes = useCallback(async () => {
|
const fetchNodes = useCallback(async () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user