fix(HeaderNavbar): replace useState with useMemo for breadcrumbItems

fix: Error: Calling setState synchronously within an effect can trigger cascading renders
This commit is contained in:
icarus 2025-10-14 18:11:18 +08:00
parent 4e7c714ea2
commit a5865cfd01

View File

@ -9,7 +9,7 @@ import { findNode } from '@renderer/services/NotesTreeService'
import { Dropdown, Input, Tooltip } from 'antd' import { Dropdown, Input, Tooltip } from 'antd'
import { t } from 'i18next' import { t } from 'i18next'
import { MoreHorizontal, PanelLeftClose, PanelRightClose, Star } from 'lucide-react' import { MoreHorizontal, PanelLeftClose, PanelRightClose, Star } from 'lucide-react'
import { useCallback, useEffect, useRef, useState } from 'react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { menuItems } from './MenuConfig' import { menuItems } from './MenuConfig'
@ -19,9 +19,6 @@ const logger = loggerService.withContext('HeaderNavbar')
const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpandPath, onRenameNode }) => { const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpandPath, onRenameNode }) => {
const { showWorkspace, toggleShowWorkspace } = useShowWorkspace() const { showWorkspace, toggleShowWorkspace } = useShowWorkspace()
const { activeNode } = useActiveNode(notesTree) const { activeNode } = useActiveNode(notesTree)
const [breadcrumbItems, setBreadcrumbItems] = useState<
Array<{ key: string; title: string; treePath: string; isFolder: boolean }>
>([])
const [titleValue, setTitleValue] = useState('') const [titleValue, setTitleValue] = useState('')
const titleInputRef = useRef<any>(null) const titleInputRef = useRef<any>(null)
const { settings, updateSettings } = useNotesSettings() const { settings, updateSettings } = useNotesSettings()
@ -146,13 +143,12 @@ const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpand
}, [activeNode]) }, [activeNode])
// 构建面包屑路径 // 构建面包屑路径
useEffect(() => { const breadcrumbItems = useMemo(() => {
if (!activeNode || !notesTree) { if (!activeNode || !notesTree) {
setBreadcrumbItems([]) return []
return
} }
const node = findNode(notesTree, activeNode.id) const node = findNode(notesTree, activeNode.id)
if (!node) return if (!node) return []
const pathParts = node.treePath.split('/').filter(Boolean) const pathParts = node.treePath.split('/').filter(Boolean)
const items = pathParts.map((part, index) => { const items = pathParts.map((part, index) => {
@ -166,7 +162,7 @@ const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpand
} }
}) })
setBreadcrumbItems(items) return items
}, [activeNode, notesTree]) }, [activeNode, notesTree])
return ( return (