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

Question

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

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 。 为了在 function 组件中使用props.history ，您可以像下面这样解构 arguments。

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

可以看到您正在以 Class 组件方式进行操作。

如果您曾经在组件中使用道具，您可以这样做

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)

}

如果您认为代码有点麻烦，您可以按照 Shubham Khatri 所做的

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

this.props只能在 class 组件中使用。

所有这些都是有效的，写作风格取决于你，随意尝试不同的方法，快乐学习。

Answer 3

如果你想用this 。 您必须以 class 反应样式创建组件。

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

export default withRouter(Summary)