Started by James CharlesSep 4, 2021

Open
How to fix this React useEffect error " Warning: Can't perform a React state update on an unmounted component."

0 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWES SHARE

0

I have 2 dashboard 1 for user and other admin and have home button on nav which redirects to userdashboard Admin user have role defined as admin on them

Here i am using useEffect hook to redirect admin to admindashboard if he clicks home button,

export default function Dashboard() {
const user = useSelector((state) => state.user);
const role = user.user_info.roles;
const history = useHistory();

useEffect(() => {
if (role === "admin") {
history.push("/admin-dashboard");
}
}, []);

return (
<React.Fragment>
<Banner />
<Row1 />
<Row2 />
<Row3 />
<Row4 />
<Row5 />
<Row6 />
</React.Fragment>
);
}

Banner n each row are mapping videos

export default function Row1() {
const history = useHistory();

const [videos, setVideos] = useState([]);

useEffect(() => {
const getData = async () => {
const data = await getAllVideosTopRated();
setVideos(data);
};

getData();
}, []);

const handleClick = (id) => {
history.push(`/videoplayer/${id}`);
};

const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 5,
slidesToSlide: 3,
},
laptop: {
breakpoint: { max: 1024, min: 768 },
items: 3,
slidesToSlide: 2, // optional, default to 1.
},
tablet: {
breakpoint: { max: 768, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 330 },
items: 1,
},
mobileSmall: {
breakpoint: { max: 320, min: 0 },
items: 1,
slidesToSlide: 1, // optional, default to 1.
},
};

return (
<React.Fragment>
<Container maxWidth="xl" className="row">
<h2>Top Rated</h2>
{videos !== null && videos.length ? (
<Carousel responsive={responsive} swipeable={true}>
{videos.map((item) => (
<div className="row_thumbnails" key={item.id}>
<img
onClick={() => handleClick(item.id)}
className="row_thumbnail"
src={item.thumbnail}
alt={item.title}
/>
</div>
))}
</Carousel>
) : (
<Loader />
)}
</Container>
</React.Fragment>
);
}

It redirects as expected but i get this above mentioned error with each row in browser console

0 Replies

You must be Logged in to reply
Techiio

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

facebooklinkdeintwitter

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Copyright techiio.com @2020 Kolkata, India
made with by Abhishek & Priyanka Jalan
Copyright techiio.com @2020
made with by Abhishek & Priyanka Jalan