![](/img/trans.png)
[英]React: SetInterval in ComponentDidMount causing error "Warning: Can't perform a React state update on an unmounted component."
[英]When I add Nextjs Image component in react hook, will show error "Can't perform a React state update on an unmounted component."
当 window 宽度改变时,我制作了一个需要改变布局的 UI。
但是当我在钩子中添加 Image(Nextjs component) 时,我会收到错误消息。
不知道为什么add Image(Nextjs component)会出现这个问题。
Devtool 显示错误信息。
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at Image (webpack-internal:///./node_modules/next/dist/client/image.js:376:22)
at a
at div
at div
at LinkBar
钩子有问题
const LinkBar = () => {
return (
<>
<div className="justify-center items-center flex flex-wrap gap-4">
<a target="_blank" href="https://www.twitch.tv/xxxxxx" rel="noopener noreferrer">
<div className="px-4 rounded-lg border-2 border-blue-200 bg-purple-400 ring-2 ring-purple-900 font-bold hover:text-white">
Twitch
</div>
</a>
</div><div className="mt-4 gap-4 md:flex md:justify-center md:items-center">
<div className="text-center">
<a target="_blank" href="xxxxxx" rel="noopener noreferrer">
<Image src="/images/line_stamp.jpg" alt="logo" width={320} height={240} layout="intrinsic" />
</a>
</div>
<div className="text-center">
<SubscriptionStampViewer />
</div>
<div className="py-4"></div>
</div>
</>
)
}
检查宽度为 function 的主页。
const Home: NextPage = () => {
const [mobileStyle, setMobileStyle] = useState(false);
const handleResize = () => {
if (window.innerWidth > 767) {
setMobileStyle(true);
} else if (window.innerWidth < 767) {
setMobileStyle(false);
}
}
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [])
return (
<Layout>
<div className="w-full">
<div className="justify-center items-end md:flex">
<div className="px-4 pt-4 md:p-0 md:mb-16">
<div>
<Image src="/images/logo.png" alt="logo" width={750} height={264} layout="intrinsic" />
</div>
{mobileStyle ? <LinkBar /> : null}
</div>
<div className="text-center">
<Image src="/images/avatar.png" alt="avatar" width={666} height={850} layout="intrinsic" />
</div>
{mobileStyle ? null : <LinkBar />}
</div>
</div>
</Layout>
)
}
SubscriptionStampViewer 代码
const SubscriptionStampViewer = () => {
const [toggle, setToogle] = useState(true);
return (
<div className="border-2 w-80 h-60">
<div className="h-4/5 border-2 overflow-auto">
<div>Follow</div>
<div>Tier1</div>
<div>Tier2</div>
<div>Tier3</div>
<div>Bits</div>
</div>
<div className="h-1/5 border-2 flex">
{toggle ?
<>
<button className="w-1/2 h-full bg-red-500 hover:bg-red-500 active:bg-red-900" disabled={toggle} onClick={e => setToogle(true)}>Sub</button>
<button className="w-1/2 h-full bg-green-200 hover:bg-green-500 active:bg-green-900" onClick={e => setToogle(false)}>Badges</button>
</>
:
<>
<button className="w-1/2 h-full bg-red-200 hover:bg-red-500 active:bg-red-900" onClick={e => setToogle(true)}>Sub</button>
<button className="w-1/2 h-full bg-green-500 hover:bg-green-500 active:bg-green-900" disabled={!toggle} onClick={e => setToogle(false)}>Badges</button>
</>
}
</div>
</div>
)
}
我认为您可以将代码更改为以下
useEffect(() => {
// try adding this
if (typeof window !== 'undefined') {
handleResize();
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [])
return (
<Layout>
<div className="w-full">
<div className="justify-center items-end md:flex">
<div className="px-4 pt-4 md:p-0 md:mb-16">
<div>
<Image src="/images/logo.png" alt="logo" width={750} height={264} layout="intrinsic" />
</div>
{mobileStyle && <LinkBar />}
</div>
<div className="text-center">
<Image src="/images/avatar.png" alt="avatar" width={666} height={850} layout="intrinsic" />
</div>
{!mobileStyle && <LinkBar />}
</div>
</div>
</Layout>
)
在SubscriptionStampViewer
中,为了减少重复,您可以将代码更改为:
<div className="h-1/5 border-2 flex">
<button className={`w-1/2 h-full bg-red-${toggle ? "500" : "200"} hover:bg-red-500 active:bg-red-900`} disabled={toggle} onClick={e => setToogle(true)}>Sub</button>
<button className={`w-1/2 h-full bg-green-${toggle ? "200" : "500"} hover:bg-green-500 active:bg-green-900`} disabled={!toggle} onClick={e => setToogle(false)}>Badges</button>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.