Data Lost on Page Refresh

Viewed 588

I'm trying to show an item in a product component, and everything works fine using react-router-dom (Routes), but when I reload the page I lose the data and the items are gone. I know that is because of the match object from react-router-dom

The way I'm doing all is passing the id of the item as argument to my getById action, the problem is that the id that I'm passing is from the match.params object

Product Component

class Producto extends Component {


    static propTypes = {
        getById: PropTypes.func.isRequired,
        item: PropTypes.object.isRequired
    }

    componentDidMount(){
        this.props.getById(this.props.match.params.id);
    }

    render() {
        const [item] = this.props.item.items;
        return (
            <Container>
                <Row>
                    <Col sm="12" md="8">
                        <h3>{item.nombre}</h3>
                    </Col>
                    <Col sm="12" md="4">
                        <h3>{item.precio}</h3>
                    </Col>
                </Row>
            </Container>
        )
    }
}

const mapStateToProps = state => ({
    item: state.item
})

export default connect(
    mapStateToProps,
    {getById}
)(Producto);

Recents component

This component shows the recent products

items.map( item => (
    <Col>
        <Card>

            <CardImg top width="100%" src= {`../../../${item.imagenes[0].path}`}></CardImg>
                <CardBody>
                    <CardTitle>
                        <NavLink><Link to={`/producto/${item._id}`}>{item.nombre}</Link></NavLink>
                    </CardTitle>
                    <CardText>{item.descripcion}</CardText>
                    <Button>Comprar</Button>
                 </CardBody>
         </Card>
     </Col>
 ))

Finally my getById action

export const getById = id => dispatch => {
    axios
        .get(`/api/items/${id}`)
        .then(res => {
            dispatch({
                type: GET_ITEMS_BY_ID,
                payload: res.data
            })
        });
}

If you want more context about this is my git repository:

https://github.com/Franguestclain/OnlineStore

0 Answers
Related