Techiio-author
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."

1 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 1 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-logo

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:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance