TypeError: невозможно прочитать свойство 'props' неопределенного - даже если я передаю некоторые данные в реквизитах этому компоненту

Question

Я не понимаю одного, почему это дает мне ошибку «TypeError: Cannot read property 'props' of undefined»?

import React from 'react';
import { withRouter } from 'react-router-dom';
import * as ROUTES from '../../../constants/routes';

function Summary({ reservationData }) {
    if (reservationData.participants !== "" && reservationData.city !== "" && reservationData.day !== "" && reservationData.hour !== "") {
        return (
            <div>Summary<br />
                Participants: {reservationData.participants} <br />
                City: {reservationData.city} <br />
                Day: {reservationData.day} <br />
                Hour: {reservationData.hour} <br />
                {console.log(reservationData)}
            </div>

        );
    } else {
        { this.props.history.push(ROUTES.RESERVATION) }
    }
}

Это дает мне ошибку в последней строке в операторе else

} else {
    { this.props.history.push(ROUTES.RESERVATION) }
}

Answer 1

Summary является функциональным компонентом и не имеет доступа к this. Чтобы использовать props.history в функциональном компоненте, вы можете деструктурировать аргументы, как показано ниже.

function Summary({ reservationData, history }) {
    if (reservationData.participants !== "" && reservationData.city !== "" && reservationData.day !== "" && reservationData.hour !== "") {
        return (
            <div>Summary<br />
                Participants: {reservationData.participants} <br />
                City: {reservationData.city} <br />
                Day: {reservationData.day} <br />
                Hour: {reservationData.hour} <br />
                {console.log(reservationData)}
            </div>

        );
    } else {
        history.push(ROUTES.RESERVATION;
    }
}

Answer 2

Видно, что вы делаете с помощью компонента класса.

Если вы использовали реквизиты в своем компоненте, вы можете сделать

function Summary(props) {
    // Then access the history and reservationData in this way
    const { reservationData, history } = props

    history.push(ROUTES.RESERVATION);

    // Or
    props.history.push(ROUTES.RESERVATION)

}

Если вы считаете, что код немного немного хлопотно, вы можете следить за тем, что сделал Шубхам Хатри

function Summary({ reservationData, history}) {
    history.push(ROUTES.RESERVATION)
}

this.props можно использовать только в классе Component.

Все это действительно, написав стиль зависит от вас, вы можете попробовать другой подход, Happy Learning.

Answer 3

, если вы хотите использовать this. вам нужно создать компонент в стиле реакции класса.

class Summary extends React.Component {
  render() {
    //...
    this.props.history.push(ROUTES.RESERVATION)
  }
}

export default withRouter(Summary)