Question

我有一个从Redux Store获取信息的组件。要初始化存储，我正在调用通过AJAX调用填充状态的调度函数。

我面临的问题是条件渲染始终为FALSE。我甚至在控制台中调试语句，它输出TRUE但在条件渲染中它总是FALSE（它跳过渲染子组件）

以下是我正在使用的代码：

componentDidMount() {
    this.props.routeInfo()     
}

render() {


    console.log(Object.keys(this.props.inboundRoute).length !== 0);
    //After dispatch and redux state changes this outputs to TRUE!


    return (

        <div className="wrapper wrapper-content animated fadeInRight">
             //This statement is always FALSE
            {Object.keys(this.props.inboundRoute).length !== 0 &&

            <div className={`${this.props.match.params.ticketType !== "2" ? "col-md-12" : "col-md-6"}`}>
                <TicketInfo/>
            </div>
            }

            <BillingInfo/>
        </div>
    )
}

Redux状态初始化：

function mapStateToProps(state) {
return {
    inboundRoute: state.passenger.inboundRoute,
    returnRoute: state.passenger.returnRoute,
};
}

export default withRouter(connect(mapStateToProps, {routeInfo})(PassengerList));

修改

一旦触发render内部的return方法，看起来props总是空的。有人知道为什么吗？

条件渲染始终为FALSE

0 个答案: