我有一些关于我的英雄部分与framer.motion动画，我只想在第一次加载。
我想在本地存储中存储一些内容，以跟踪是否显示动画，使用useState和useEffect。
useEffect确实影响了本地存储，但我不知道为什么我的英雄部分仍然显示相同的东西，如果useState没有改变。

async function Hero() {

    const [animate, setAnimate] = useState(true);

    useEffect(() => {
        if(localStorage.getItem('animate') != null){
             localStorage.setItem('animate', 'false')
             setAnimate(false)
          }else{
             localStorage.setItem('animate', 'true')
          }
        }
    }, []);

  return (
     <div>
     <motion.h1 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}}>Some text</motion.h1>
     </div>
    )
}

export default Hero

在第一次加载localStorage中的“animate”为true，然后打开false，但它不影响动画。
我检查了一段简单的代码，以确保它不是来自我的成帧器代码，但它是一样的

{animate == true?<h1>True</h1>:<h1>False</h1>}

我试图改变依赖数组，但仍然不工作。
用这个代码：

async function Hero() {

const [animate, setAnimate] = useState(true);
console.log(animate)

useEffect(() => {
        if(localStorage.getItem('animate') != null){
            localStorage.setItem('animate', 'false')
            setAnimate(false)
        }else{
            localStorage.setItem('animate', 'true')
        }
}, []);

它首先记录真，而不是当我在其他地方导航，然后返回它记录真，然后无限假（像一秒1000次）
你知道吗？

编辑

这里是完整的代码。这个组件在app目录中插入了一个组件目录。我不知道为什么，但当我对组件使用useEffect时，它会使整个页面变慢，甚至会使窗口崩溃。

'use client'
import {React, useState, useEffect} from 'react'
import Link from 'next/link'
import { IoIosPin } from "react-icons/io";
import { IoMdBus } from "react-icons/io";
import { motion } from "framer-motion"

export default async function Hero() {

    const [animate, setAnimate] = useState(true);

    useEffect(() => {
        if(localStorage.getItem('animate') != null){
             localStorage.setItem('animate', 'false')
             setAnimate(false)
          }else{
             localStorage.setItem('animate', 'true')
          }
        },[])

  return (
    <div className='px-2 pt-3 mdl:px-8 lgl:px-12 xl:px-16'>
        <div className='relative w-full bg-[url("/hero/cabinet-paysage.jpg")] bg-cover bg-center bg-no-repeat sml:min-h-[300px] mdl:min-h-[400px] lg:min-h-[450px] lgl:min-h-[500px]'>
            <motion.div className="w-full h-full bg-bgwhite sml:min-h-[300px] mdl:min-h-[400px] lg:min-h-[450px] lgl:min-h-[500px]" animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{ease: "linear", duration:0.5}}>
                <div className=' w-full h-full max-w-[1000px] sml:min-h-[300px] mdl:min-h-[400px] p-5 mx-auto grid grid-cols-1 grid-rows-8 auto-rows-fr auto-cols-fr sml:grid-cols-3 sml:grid-rows-2'>
                    <div className='row-span-4 flex flex-col justify-center gap-3 mdl:gap-4 lg:gap-5 xl:gap-6 sml:col-start-1 sml:col-end-3 sml:row-span-2 '>
                        <motion.h1 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.2, ease: "linear", duration:0.3}}>Some text</motion.h1>
                        <motion.h2 animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.4, ease: "linear", duration:0.3}}>Some text</motion.h2>
                        <motion.p className='sml:max-w-[450px] headertext' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.6, ease: "linear", duration:0.3}}>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte et</motion.p>
                    </div>
                    <div className='row-span-3 flex flex-col justify-center items-center gap-2 sml:col-start-3 sml:row-span-2'>
                        <div className='flex justify-center gap-4'>
                            <motion.div className='flex flex-col items-center w-24 text-center' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.2, ease: "linear", duration:0.3}}>
                                <IoIosPin className='reacticons'/>
                                <p className='headertext'>Some text</p>
                            </motion.div>
                            <motion.div className='flex flex-col items-center w-24 text-center' animate={{opacity:1}} initial={animate == true ? {opacity:0} : {opacity:1}} transition={{delay:0.4, ease: "linear", duration:0.3}}>
                                <IoMdBus className='reacticons'/>
                                <p className='headertext'>Some text</p>
                            </motion.div>
                        </div>
                        <Link href="/#contact" className='buttonheader inline-block text-center self-center'>
                            Prendre Rendez-Vous
                        </Link>
                    </div>
                </div>
            </motion.div>

        </div>
    </div>
  )
}