fix(NodeSwitcher): avoid SSR hydration error by deferring portal creation
Build and Deploy / Build and Push Docker Image (push) Successful in 1m59s
Build and Deploy / Build and Push Docker Image (push) Successful in 1m59s
This commit is contained in:
@@ -17,8 +17,13 @@ export function NodeSwitcher() {
|
|||||||
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>({})
|
||||||
|
const [mounted, setMounted] = useState(false)
|
||||||
const buttonRef = useRef<HTMLButtonElement>(null)
|
const buttonRef = useRef<HTMLButtonElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
const fetchNodes = useCallback(async () => {
|
const fetchNodes = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await getNodes()
|
const res = await getNodes()
|
||||||
@@ -157,6 +162,7 @@ export function NodeSwitcher() {
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
{open &&
|
{open &&
|
||||||
|
mounted &&
|
||||||
createPortal(
|
createPortal(
|
||||||
<div className="ui-select-menu" style={menuStyle}>
|
<div className="ui-select-menu" style={menuStyle}>
|
||||||
{allOptions.map((opt) => (
|
{allOptions.map((opt) => (
|
||||||
|
|||||||
Reference in New Issue
Block a user