道具没有传递给孩子

Question

真奇怪 我的console.log产生了一家公司：

但出于某种原因，当我尝试从道具中拉出它时，它为空

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

公司详情

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

/////更新////

这工作：

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

但是，为什么这个组合可以正常工作呢？ 它的设置几乎相同。 这是我应用上的第一个路线点击，呈现了以下容器：

主页容器

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工具深色主题。 这是我在WebStorm中的实际主题，我认为它更好一些：P：

Answer 1

componentDidMount在render之后被调用，并且您的async call在componentDidMount ，因此对于第一个渲染，父对象和子对象都将为null ，并且由于您在child中使用company.name而不进行条件检查，因此会出错。 在孩子中提供条件检查，它将正常工作

  const { company } = this.props;

  console.log(company)

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