I’m getting the warning ( React Hook useEffect has a missing dependency: ‘dispatch’ ) which I doubt it is the cause of the error I’m getting (TypeError: Cannot destructure property ‘product’ of ‘productDetails’ as it is undefined.) can anyone help me with this?
here is the code
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch, connect } from 'react-redux';
import { detailsProduct } from '../actions/productActions';
function ProductScreen(props) {
const productDetails = useSelector(state => state.detailsProduct);
const { product, loading, error } = productDetails;
const dispatch = useDispatch();
useEffect(() => {
dispatch(detailsProduct());
return () => {
};
}, [])
return <div>
<div className="back-to-result">
<Link to="/">Back to results</Link>
</div>
{loading ? <div>Loading...</div> : error ? <div>{error}</div> :
(
<div className="details">
<div className="details-image">
<img src={product.image} alt="product"></img>
</div>
<div className="details-info">
<ul>
<li>
<h4>{product.name}</h4>
</li>
<li>
{product.rating} stars ({product.numReviews} Reviews)
</li>
<li>
Price: <b>{product.price} Rwf</b>
</li>
<li>
Description:
<div>
{product.description}
</div>
</li>
</ul>
</div>
<div className="details-action">
<ul>
<li>
Price: {product.price}
</li>
<li>
Status: {product.status}
</li>
<li>
Qty: <select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</li>
<li>
<button className="button"> Add to cart</button>
</li>
</ul>
</div>
</div>
)
}
</div>
}
const MapStateToProps = (state) => {
console.log('state :>> ', state);
return state
}
export default connect(MapStateToProps, { detailsProduct })(ProductScreen);
