类型错误：无法读取未定义的属性“道具” - 即使我将道具中的一些数据传递给该组件

Question

我不明白一件事，为什么给我一个错误“TypeError：无法读取未定义的属性‘道具’”？

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