'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 |
|---|
