react路由器，监听推送请求

Question

我在一个使用帧者运动和next.js的网站上工作，问题是我需要删除一个允许动画在路径改变之前发生的类。

一开始我试过

import {useRouter} from  'next/router'
export default function Projects(){
const [animated,setAnimated] = useState(true)
const {asPath} = useRouter()
useEffect(() => {
if(asPath!== '/projects'){
setAnimated(false)
}else{
setAnimated(true)
}
},[asPath])


return(
<div  className={styles.activeLayer}>
<Image  layout="fill"  height='100%'src={allProjects[currentDisplay].backgroundImg}  alt=""/>
<div className={`${styles.descriptionBox} + ${(**animated** ? styles.animatedOne:'')}`}>
<h2>
SomeTitle
</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Modi excepturi esse ex odit saepe ipsam facere beatae similique doloremque quo quidem tempore quas molestias, commodi corporis natus possimus atque voluptatem?</p>
<div className={`${styles.iconComponent} + ${(animated ? styles.animatedFive:'')}`}>
<Tool  imgArray={allProjects[currentDisplay].tools} />
</div>

这不起作用，因为动画在它改变之前运行了一毫秒，它实际上需要听取来自<Link>的推送请求，但我不知道如何做到这一点。

Answer 1

可以交换。设置默认状态为false。

import {useRouter} from  'next/router'
const [animated,setAnimated] = useState(false)
const {asPath} = useRouter()

useEffect(() => {
if(asPath !== '/projects'){
setAnimated(false)
}else{
setAnimated(true)
}
},[asPath])

Answer 2

与其使用一些可能不正确的初始状态并在初始渲染后使用useEffect钩子更新它，不如设置正确的初始状态。

的例子:

import { useRouter } from  'next/router';
export default function Projects() {
const {asPath} = useRouter();
const animated = asPath === '/projects';
return (
<div className={styles.activeLayer}>
<Image
layout="fill"
height='100%'
src={allProjects[currentDisplay].backgroundImg}
alt=""
/>
<div
className={`${styles.descriptionBox} + ${animated
? styles.animatedOne : ''}`
}
>
<h2>SomeTitle</h2>
<p>....</p>
<div
className={`${styles.iconComponent} + ${animated
? styles.animatedFive : ''}`
}
>
<Tool imgArray={allProjects[currentDisplay].tools} />
</div>
</div>
</div>
);
}

animated可以被认为是派生状态，它通常被认为是一个React反模式，在React状态中存储派生状态。直接使用asPath === '/projects'值即可。

的例子:

import { useRouter } from  'next/router';
export default function Projects() {
const {asPath} = useRouter();
return (
<div className={styles.activeLayer}>
<Image
layout="fill"
height='100%'
src={allProjects[currentDisplay].backgroundImg}
alt=""
/>
<div
className={`${styles.descriptionBox} + ${animated
? styles.animatedOne : ''}`
}
>
<h2>SomeTitle</h2>
<p>.....</p>
<div
className={`${styles.iconComponent} + ${animated
? styles.animatedFive : ''}`
}
>
<Tool imgArray={allProjects[currentDisplay].tools} />
</div>
</div>
</div>
);
}