Uncaught TypeError: Cannot read properties of undefined (reading '0') after refresh

Question

I have a weird probleme here, so i am working with redux and this is my component code for a selected product from reducer state.

import './productInfo.css';
import { useParams } from 'react-router-dom';
import { getProduct } from '../../actions/productActions';
import { connect } from 'react-redux';
import { useEffect, useState } from 'react';


const ProductInfo = (props) => {

    
    const [usedProduct, setUsedProduct] = useState(props)

    const {id} = useParams();
    
    useEffect(() => {
        props.getProduct(id);

    }, [usedProduct])

    let newUsedProduct = usedProduct;
    console.log(usedProduct.products[0].name)

    
    
    

    return ( 
        <div>
            
            

        </div>
     );
}

const mapStateToProps = (state) => {
    return{
        products : state.myProduct.product
    }
}

export default connect( mapStateToProps, { getProduct })(ProductInfo);

so when i launch the component for the first time it works and i got the necessary data from the reducer state but when i refresh the page it gives me this error : Uncaught TypeError: Cannot read properties of undefined (reading '0') in this line of code :

console.log(usedProduct.products[0].name)

i'm totally lost !

Does this answer your question? [Uncaught TypeError: Cannot read properties of undefined (reading 'rendered')](https://stackoverflow.com/questions/70682832/uncaught-typeerror-cannot-read-properties-of-undefined-reading-rendered) — Apostolos, Oct 21 '22 at 08:26

score 0 · Answer 1 · answered Oct 21 '22 at 08:29

0

Redux store (in default setup) will not persist through refresh, you need to use some persist method (store it in localstorage or something like that) or you need always to repopulate store before reading it.

answered Oct 21 '22 at 08:29

Wraithy

1,722
1
5
13

score 0 · Accepted Answer · answered Oct 21 '22 at 08:34

When you reload the page all React state, including the Redux state, are lost since they exist only in memory. The component should handle potentially missing data.

Example:

const ProductInfo = ({ getProduct, products }) => {
  const { id } = useParams();
    
  useEffect(() => {
    getProduct(id);
  }, [id, getProduct]);

  useEffect(() => {
    console.log(products?.[0]?.name); // <-- log in effect
  }, [products]);

  return ( 
    <div>
      ...
    </div>
  );
};

const mapStateToProps = (state) => ({
  products: state.myProduct.product || [], // <-- provide fallback
});

export default connect(mapStateToProps, { getProduct })(ProductInfo);

I'd also suggest updating the code to use the react-redux hooks.

Example:

import { useDispatch, useSelector } from 'react-redux';

const ProductInfo = () => {
  const dispatch = useDispatch();
  const products = useSelector(state => state.myProduct.product || []);

  const { id } = useParams();
    
  useEffect(() => {
    dispatch(getProduct(id));
  }, [id, getProduct]);

  useEffect(() => {
    console.log(products?.[0]?.name); // <-- log in effect
  }, [products]);

  return ( 
    <div>
      ...
    </div>
  );
};

export default ProductInfo;

it worked. thank you so much ... and about the hooks i should learn them first — islam gueniari, Oct 24 '22 at 13:43

Uncaught TypeError: Cannot read properties of undefined (reading '0') after refresh

2 Answers2