为何无法使用<BookingGetServices numGuests={this.state.numGuests}/>？报错分析

错误原因 #

构造函数的执行顺序是：先调用super()，接着初始化this.pages数组，最后才给this.state赋值。当你在this.pages中使用<BookingGetServices numGuests={this.state.numGuests}/>时，this.state还未被定义（此时为undefined），所以访问this.state.numGuests会触发Cannot read properties of undefined错误。

解决方法 #

方法1：调整初始化顺序（适用于无需动态更新pages的场景） #

如果pages中的组件不需要跟随state变化更新，可以先把state初始值存入临时变量，再同时初始化this.pages和this.state：

constructor() {
    super({});
    // 先定义state初始值
    const initialState = {
        pageIndex: 0,
        numGuests: -1
    };
    // 用临时变量的值初始化pages
    this.pages = [
        <BookingGetNumGuests submitNumGuests={this.submitNumGuests}/>,
        <BookingGetServices numGuests={initialState.numGuests}/>
    ];
    // 赋值给this.state
    this.state = initialState;
}

方法2：动态生成pages（推荐，支持state更新） #

如果需要pages中的组件响应state变化（比如numGuests更新后，BookingGetServices显示最新值），不要在构造函数中提前创建组件数组，改成动态返回的方法：

constructor() {
    super({});
    this.state = {
        pageIndex: 0,
        numGuests: -1
    };
}

// 动态生成pages的方法
getPages() {
    return [
        <BookingGetNumGuests submitNumGuests={this.submitNumGuests}/>,
        <BookingGetServices numGuests={this.state.numGuests}/>
    ];
}

render() {
    const pages = this.getPages();
    return <div>{pages[this.state.pageIndex]}</div>;
}

每次state变化时，getPages()都会重新执行，生成的BookingGetServices组件能拿到最新的numGuests值。

方法3：直接在render中定义pages #

简化写法，直接在render方法里定义pages数组，避免提前初始化的问题：

constructor() {
    super({});
    this.state = {
        pageIndex: 0,
        numGuests: -1
    };
}

render() {
    const pages = [
        <BookingGetNumGuests submitNumGuests={this.submitNumGuests}/>,
        <BookingGetServices numGuests={this.state.numGuests}/>
    ];
    return <div>{pages[this.state.pageIndex]}</div>;
}

内容的提问来源于stack exchange，提问作者Duy Anh Nguyen