TypeError: Cannot destructure property 'product' of 'productDetails' as it is undefined

1

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);
2

You are following this tutorial too, hey?

I got this error near 2:18:00.

If you check ‘productDetails’ it is truly undefined. It has to do with the missing reducers. Keep watching the video - he will explain it.

3

Without diving to much into the 5 hour tutorial, or anything React specific (as this is an error you can run into anytime in JS) the error comes down JS trying to do something that isn’t “possible”.

This error has to do with the following code:

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

So there are a few ways to fix this:

  • “escape” before you destruct productDetails (this probably wont make sense with this component tho)
  • provide a default value in the selector or after the selector.
    • useSelector(state => state.detailsProduct || {})
  • don’t let this component “exist” without having productDetails. IE have the parent component not “create” this component without productDetails being defined.

Good luck!

If productDetails is undefined, you can’t destruct product,loading, or error, hence the error.

4

hey, Auxile . I got the same error. finally. I figured it out. the problem was in productActions. js module. where you send a request to the server. "axios .get(‘api/products’ + productId); here one more “/” is missing at the end of “api/products/”. it did work for me.

5

I’m following this tutorial too, but I’ve got the same problem but none of the solutions above worked for me… I can’t understand why the object is undefined :frowning:

6

Resolved: the problem was inside the store.js file. In my case was a syntax problem, but explaining it better and also in order to learn, I debugged my app lots of times and I could conclude that the problem was coming from the state (actually, the state returned an Object, but it didn’t pass to the ProductScreen because of the miscomprehension in the store mentioned above.

Hope it helps!