Ini aneh. Console.log saya menghasilkan perusahaan:

enter image description here

Tetapi untuk beberapa alasan pada anak saya, ketika saya mencoba menariknya dari alat peraga, itu nol

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

Detail Perusahaan

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

///// PERBARUI ////

Ini berhasil:

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

Tapi lalu mengapa kombo ini bekerja dengan baik? setupnya hampir sama. Ini adalah hit rute pertama di aplikasi saya, membuat wadah ini:

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

Beranda

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

Untuk sobat yang mengomentari tema saya, gambar pertama di atas adalah dari tema gelap alat Chrome. Ini adalah tema saya yang sebenarnya di WebStorm yang menurut saya lebih baik :P:

enter image description here

1
PositiveGuy 25 November 2017, 08:04

1 menjawab

Jawaban Terbaik

componentDidMount dipanggil setelah render dan async call Anda ada di componentDidMount, jadi untuk render pertama, induk dan anak mendapatkan null, dan karena anda menggunakan company.name pada anak tanpa kesalahan periksa bersyarat. Berikan pemeriksaan bersyarat pada anak dan itu akan berfungsi dengan baik

  const { company } = this.props;

  console.log(company)

  const title = company ? `${company.name} Details`: null;
0
Shubham Khatri 25 November 2017, 07:37