在反应中从父路由组件加载状态

Question

我的react router有这种情况：

root.js

<Route path="job-opportunity" component={Opportunity} >
    <Route path=":opportunitySlug" />
</Route>

当我打开域时。com/job-opportunity 一切正常但是当我点击子路由域时。com/job-opportunity/some-slug

它不会从我在子组件中使用的 Opportunity 组件加载某些构造函数状态。

让我向您展示我的机会组件：

class Opportunity extends React.Component{
    constructor(props){
        super(props);

        this.loadOpportunities = this.loadOpportunities.bind(this);

        this.state = {
            'opportunities' : []
        };
        this.loadOpportunities();
    }
    loadOpportunities(){
        $.get($('.api_router_load_opportunities').val(), function(data){
            this.setState({'opportunities' : data});
        }.bind(this));
    }
    render() {
        return (
            <div>
                <h1>Layout!</h1>
                <Content
                    opportunities={this.state.opportunities}
                    loggedUser={this.props.loggedUser}
                    opportunitySlug={this.props.params.opportunitySlug}
                    />
            </div>
        )
    }
} 

function Content(props){
    const opportunitySlug = props.opportunitySlug;
    if(opportunitySlug){
        return <SingleOpportunity
            opportunities={props.opportunities}
            loggedUser={props.loggedUser}
            opportunitySlug={opportunitySlug}
            />;
    }else{
        return <ListOpportunity
            opportunities={props.opportunities}
            loggedUser={props.loggedUser}
            />;
    }
}

导出默认机会；

基本上当我访问域时。com/job-opportunity 然后在浏览器中从 link 导航，即使在这条路线中也一切正常：

domain.com/job-opportunity/some-slug

但是当我直接在浏览器域中点击时。com/job-opportunity/some-slug

它坏了，因为我在 SingleOpportunity 中渲染 this.props.opportunities[this.props.opportunitySlug].name

Answer 1

我找到了一些解决方案：

if(this.props.opportunities.length != 0){
            const opportunity = this.props.opportunities[this.props.opportunitySlug];
            return (
                <div key={this.props.opportunitySlug}>
                    <p><strong>Name:</strong> {opportunity.name}</p>
                    <p><strong>Description:</strong> {opportunity.description}</p>
                </div>
            );
        }else{
            return null;
        }

如果您在初始加载后使用某些道具或状态，它将渲染多次，并且在最后一次渲染时它会加载您的道具或状态！所以你需要通过检查你的状态或道具是否准备好来处理你的渲染函数。

在反应中从父路由组件加载状态

Loading state from parent route component in react

rect