fix: add locale dependency to component rendering effects

This commit is contained in:
hamster1963 2025-02-13 14:56:56 +08:00
parent e55a60c12e
commit a6aa91d35a
2 changed files with 7 additions and 5 deletions

View File

@ -2,7 +2,7 @@
import getEnv from "@/lib/env-entry" import getEnv from "@/lib/env-entry"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { useTranslations } from "next-intl" import { useLocale, useTranslations } from "next-intl"
import { createRef, useEffect, useRef, useState } from "react" import { createRef, useEffect, useRef, useState } from "react"
export default function Switch({ export default function Switch({
@ -19,6 +19,7 @@ export default function Switch({
const scrollRef = useRef<HTMLDivElement>(null) const scrollRef = useRef<HTMLDivElement>(null)
const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>())) const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
const t = useTranslations("ServerListClient") const t = useTranslations("ServerListClient")
const locale = useLocale()
const [indicator, setIndicator] = useState<{ x: number; w: number }>({ const [indicator, setIndicator] = useState<{ x: number; w: number }>({
x: 0, x: 0,
w: 0, w: 0,
@ -58,7 +59,7 @@ export default function Switch({
w: currentTagElement.offsetWidth, w: currentTagElement.offsetWidth,
}) })
} }
}, [nowTag]) }, [nowTag, locale])
useEffect(() => { useEffect(() => {
const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
@ -75,7 +76,7 @@ export default function Switch({
behavior: "smooth", behavior: "smooth",
}) })
} }
}, [nowTag]) }, [nowTag, locale])
return ( return (
<div <div

View File

@ -1,7 +1,7 @@
"use client" "use client"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { useTranslations } from "next-intl" import { useLocale, useTranslations } from "next-intl"
import { useEffect, useRef, useState } from "react" import { useEffect, useRef, useState } from "react"
export default function TabSwitch({ export default function TabSwitch({
@ -19,6 +19,7 @@ export default function TabSwitch({
w: 0, w: 0,
}) })
const tabRefs = useRef<(HTMLDivElement | null)[]>([]) const tabRefs = useRef<(HTMLDivElement | null)[]>([])
const locale = useLocale()
useEffect(() => { useEffect(() => {
const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)] const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)]
@ -32,7 +33,7 @@ export default function TabSwitch({
w: currentTabElement.offsetWidth, w: currentTabElement.offsetWidth,
}) })
} }
}, [currentTab, tabs]) }, [currentTab, tabs, locale])
return ( return (
<div className="z-50 flex flex-col items-start rounded-[50px]"> <div className="z-50 flex flex-col items-start rounded-[50px]">