Prop wird nicht an Child übergeben

Question

Das ist bizarr. Mein console.log produziert ein Unternehmen:

aber aus irgendeinem Grund in meinem Kind, wenn ich es von Requisiten versuchen ziehen, es ist null

CompanyDetailContainer

class CompanyDetailContainer extends Component { 

    async componentDidMount() { 
    const { fetchCompany } = this.props, 
     { companyId } = this.props.match.params; 
    await fetchCompany(companyId); 
    } 

    render(){ 
    const { company } = this.props; 
    console.log(company) // this outputs a company 
    return (
     <CompanyDetail className="ft-company-detail" company={company} /> 
    ); 
    } 
} 

const mapStateToProps = state => ({ 
    company: state.company.company 
}); 

const mapDispatchToProps = { 
    fetchCompany: fetchCompany 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(CompanyDetailContainer); 

FirmaDetail

export default class CompanyDetail extends Component { 
    render(){ 
    const callToAction = 'test'; 
     const { company } = this.props; 

     console.log(company) // this is null! why??? I've never had this problem before 

     const title = `${company.name} Details`; 
    return (
     <Main> 
     <MainLayout title={title}> 
      <div> 
      <div id='ft-company-detail'> 
       <div className="panel vertical-space"> 
       <CompanyHeader className="ft-company-header" company={company} /> 
       <div className="ft-call-to-action-interview">{callToAction}</div> 
       <CompanyProfile className="ft-company-profile" company={company} /> 
       <RelatedLinks className="ft-company-resources" company={company} /> 
       </div> 
      </div> 
      </div> 
     </MainLayout> 
     </Main> 
    ); 
    } 
} 

///// UPDATE ////

dies gearbeitet:

return (
     company && <CompanyDetail className="ft-company-detail" company={company} /> 
    ); 

Aber warum tut diese Combo gut funktionieren? es ist ziemlich ähnlich aufgebaut. Dies ist der erste Weg auf meiner app getroffen, macht diese Behälter:

HomepageContainer

class HomePageContainer extends Component { 
    async componentDidMount() { 
    await this.props.fetchFeaturedCompanies(); 
    await this.props.fetchCompanies(); 
    await this.props.fetchCountries(); 
    } 

    render(){ 
    return (<HomePage 
     className='ft-homepage' 
     companies={this.props.companies} 
     countries={this.props.countries} 
     featuredCompanies={this.props.featuredCompanies} 
    />); 
    } 
} 

const mapStateToProps = state => ({ 
    countries: state.country.countries, 
    companies: state.company.companies, 
    featuredCompanies: state.company.featuredCompanies 
}); 

const mapDispatchToProps = { 
    fetchCountries: fetchCountries, 
    fetchCompanies: fetchCompanies, 
    fetchFeaturedCompanies: fetchFeaturedCompanies 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(HomePageContainer); 

HomePage

export default class HomePage extends Component { 
    render(){ 
    return (
     <Main> 
     <MainLayout title='Test'> 
      <div className="homepage panel vertical-space margin-bottom-300"> 
      <FeaturedCompanies companies={this.props.featuredCompanies} /> 
      <div> 
       <div className="column-group"> 
       <div className="all-100 width-100 align-center fw-300 extralarge"> 
       test 
       </div> 
       </div> 
      </div> 
      <CompanyList className="ft-company-list" companies={this.props.companies} countries={this.props.countries} /> 
      </div> 
     </MainLayout> 
     </Main> 
    ); 
    } 
} 

Zum fella, die auf meinem Thema kommentiert, das erste Bild Oben ist von Chrome Tools Dark Theme. Hier ist mein eigentliches Thema in WebStorm was ich denke, ist noch besser: P:

Answer 1

componentDidMount wird aufgerufen, nachdem die render und Ihre async call ist in den componentDidMount, so dass für die ersten, die Eltern machen und das Kind beide get null, und da Sie company.name in Kind ohne eine bedingte Überprüfung verwenden, es aus Fehler. einen bedingten Scheck in dem Kind zur Verfügung stellen und es wird gut

const { company } = this.props; 

    console.log(company) 

    const title = company ? `${company.name} Details`: null;