'How can I perform a mounted component in ProductDetails.js?

ERROR 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 the componentWillUnmount method.

at Carousel (http://localhost:3000/static/js/bundle.js:408125:5)
at WithStyles (http://localhost:3000/static/js/bundle.js:7696:31)
at div
at div
at ProductDetails (http://localhost:3000/static/js/bundle.js:678:76)
at Routes (http://localhost:3000/static/js/bundle.js:412339:5)
at Router (http://localhost:3000/static/js/bundle.js:412272:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:411748:5)
at App (http://localhost:3000/static/js/bundle.js:143:38)
at Provider (http://localhost:3000/static/js/bundle.js:26723:23)
at Provider (http://localhost:3000/static/js/bundle.js:409188:20)

ProductDetails.js

import Carousel from "react-material-ui-carousel";
import "./ProductDetails.css";
import { useSelector, useDispatch } from "react-redux";
import { getProductDetails } from "../../actions/productAction";
import { useParams } from "react-router-dom";
const ProductDetails = () => {
    const dispatch = useDispatch();
    const { id } = useParams()

    const { product, loading, error } = useSelector(
        (state) => state.productDetails
        );

    useEffect(() => {
        dispatch(getProductDetails(id));
    }, [dispatch, id]);
    return (
        <Fragment>
            <div className="ProductDetails">
                <div>
                    <Carousel>
                        {product.images && 
                        product.images.map((item, i) => (
                        <img
                          className="CarouselImage"
                          key={item.url}
                          src={item.url}
                          alt={`${i} Slide`}
                        />
                        ))}
                    </Carousel>
                </div>
            </div>
        </Fragment>
    );
};

export default ProductDetails;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source