Question

TypeError：无法读取未定义的属性“props”——即使我将一些数据通过 props 传递给该组件

2020-05-06

73

javascript reactjs react-props

有一件事我不明白，为什么会给我一个错误“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 。为了在函数组件中使用 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

可以看到您正在以类组件的方式执行操作。

如果您以前在组件中使用 props，您可以这样做

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 只能在类组件中使用。

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

Answer 3

如果您想使用 this ，您必须以类反应样式创建组件。

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

export default withRouter(Summary)