I make a UI that need change layout when window width change.
But when I add Image(Nextjs component) in my hook, I will get error message.
I don't know why add Image(Nextjs component) has this problem.
Devtool show error message.
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
Has problem hook
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>
</>
)
}
Main page with check width 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 Code
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>
)
}
CodePudding user response:
I think you can change the code to the below
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>
)
In SubscriptionStampViewer
to reduce repetition you can change the code to:
<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>