save

Author: zzq0826

src/components/Footer/Subscribe/Subscribe.tsx

@@ -19,9 +19,14 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
+  const [key, setKey] = useState(0)
 
   useEffect(() => {
     i18next.changeLanguage(props.lang)
+    const timer = setTimeout(() => {
+      setKey(prev => prev + 1)
+    }, 300)
+    return () => clearTimeout(timer)
   }, [props.lang])
 
   useEffect(() => {
@@ -45,7 +50,7 @@ export default function Subscribe(props) {
   }
 
   return (
-    <div key={props.lang} className={clsx(styles.container, "dark:bg-dark-highlight")}>
+    <div key={key} className={clsx(styles.container, "dark:bg-dark-highlight")}>
       <div className={styles.subscribeBox}>
         <span className="text-white dark:text-black bg-black dark:bg-white rounded-[50%]">
           <SubscribeSvg></SubscribeSvg>