小児に渡されない小道

Question

これは奇妙です。

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

CompanyDetailContainer私は小道具からそれを引いてみたときに、それは

ヌルだ、

が、私の子供では何らかの理由：私にconsole.logは、会社を生産しますCompanyDetail

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：

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

しかし、その後、なぜこのコンボ作業罰金していますか？それはセットアップとほぼ同じです。これが私のアプリにヒット最初のルートで、このコンテナレンダリング：

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

私のテーマにコメントやつ、最初の画像にホームページ

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

上記はChromeのツールの暗いテーマですP：ここで私が考えるWebStormの私の実際のテーマはさらに良いです

Answer 1

componentDidMountがrender後に呼び出され、最初に親と子の両方をレンダリングするためのように、あなたのasync callは、componentDidMountでありますnullを取得し、条件チェックなしで子にcompany.nameを使用するので、エラーが発生します。子供の条件チェックを提供し、それが正常に

const { company } = this.props; 

    console.log(company) 

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