Потерянные данные при обновлении страницы - PullRequest
Новая
       32

Потерянные данные при обновлении страницы

1 голос
/ 25 октября 2019

Я пытаюсь показать элемент в компоненте продукта, и все отлично работает, используя react-router-dom (Маршруты), но когда я перезагружаю страницу, я теряю данные, и элементы исчезают. Я знаю, что это из-за объекта соответствия из react-router-dom

. То, как я делаю все, - это передача id элемента в качестве аргумента моему действию getById, проблема в том, что id, которое я передаю, от match.params объекта

Компонент продукта 

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

Компонент "Недавние"

Этот компонент показывает последние продукты 

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

Наконец, мое действие getById 

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

Если вы хотите больше узнать об этом, это мой репозиторий git:

https://github.com/Franguestclain/OnlineStore

...