Javascript TypeError:无法读取属性'；道具'；未定义的-即使我将一些数据以道具形式传递给该组件

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

---

摘要

是一个功能组件，无权访问此。要在函数组件中使用

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

函数摘要（{reservationData，history}）{
if（reservationData.participants！==“”&&reservationData.city！==“”&&reservationData.day！==“”&&reservationData.hour！==“”）{
返回(
摘要

参与者：{reservationData.Participants}

城市：{reservationData.City}

日期：{reservationData.Day}

小时：{reservationData.Hour}

{console.log（reservationData）}
);
}否则{
历史。推送（路线。预订；
}
}

如果您想使用

此

。您必须以类react样式创建组件

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

export default withRouter(Summary)

---

可以看出您正在以类组件的方式进行操作

如果您过去在组件中使用道具，您可以

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

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

}

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