javascript - Prop 未传递给 Child

Question

这很奇怪。我的 console.log 生成了一家公司:

但是由于我的 child 的某种原因，当我尝试将其从 Prop 中拉出时，它是空的

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

致对我的主题发表评论的 friend ，上面的第一张图片来自 Chrome 工具深色主题。这是我在 WebStorm 中的实际主题，我认为它更好:P:

Answer 1

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

  const { company } = this.props;

  console.log(company)

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