レスポンスコンポーネントでヌルポインタ例外を取得する

Question

私はAPI呼び出しを行い、PatientPage.js内のcomponentDidMountのデータをフェッチしています。 PatientList.jsをレンダリングするときにrenderメソッドがcomponentDidMountの前に呼び出すので、PatientListのbootstrapTableにエラーが発生します。理由は、データがまだフェッチされていないため、PatientListの属性 'data'（this.props.patientList）がnullであるためです。

PatientPage.js：

class PatientPage extends Component { 

     static propTypes = { 
      patientState: PropTypes.object.isRequired, 
      fetchPatientList: PropTypes.func.isRequired, 
     }; 

     componentWillMount() { 
      this.props.fetchPatientList(); 
     } 


     render() { 

      return (
       <div className="content-wrapper"> 
        <PatientList 
         patientList={ this.props.patientState.patientList } 
        />   
       </div> 
      ); 

     } 
    } 

PatientList.js：

import React, { Component, PropTypes } from 'react'; 
import { dateFormatter } from 'Util'; 
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 

class PatientList extends Component { 

    static propTypes = { 
     patientList: PropTypes.Object, 
    }; 

    render() { 
     const data = this.props.patientList; 
     return (
      <div className="box-body">  
      <div id="PatientManagementTable" className="box-body firstRowHdnTbl table-header-custom"> 
     <BootstrapTable data={ data } striped={ true }> 
      <TableHeaderColumn dataField='patientId' isKey={ true } dataSort={ true }>Patient ID</TableHeaderColumn> 
      <TableHeaderColumn dataField='patientName' dataSort={ true }>Patient Name</TableHeaderColumn> 
      <TableHeaderColumn dataField='patientType' dataSort={ true }>Patient Type</TableHeaderColumn> 
     </BootstrapTable> 
      </div> 
      </div> 
     ); 

    } 

} 

export default PatientList; 

Answer 1

あなたが何ができるかPatientListの小道具のためのチェックがPatientListコンポーネントでnullまたはではないです。値がnullの場合は、安全にコンテンツをレンダリングするよりもフェッチが完了したときに、進行状況を表示して「データを読み込む」というマッサージや空のdivを返すことができます。

import React, { Component, PropTypes } from 'react'; 
import { dateFormatter } from 'Util'; 
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 

class PatientList extends Component { 

    static propTypes = { 
     patientList: PropTypes.Object, 
    }; 

    render() { 
     const data = this.props.patientList; 
     if(data == null) { 
      // render progress or message 
      return <div> Loading data ... </div> 
     } else { 

     return (
      <div className="box-body">  
      <div id="PatientManagementTable" className="box-body firstRowHdnTbl table-header-custom"> 
     <BootstrapTable data={ data } striped={ true }> 
      <TableHeaderColumn dataField='patientId' isKey={ true } dataSort={ true }>Patient ID</TableHeaderColumn> 
      <TableHeaderColumn dataField='patientName' dataSort={ true }>Patient Name</TableHeaderColumn> 
      <TableHeaderColumn dataField='patientType' dataSort={ true }>Patient Type</TableHeaderColumn> 
     </BootstrapTable> 
      </div> 
      </div> 
     ); 

     } 
    } 

} 

export default PatientList; 

私の提案は、あなたがデータのロードを開始したときに最後に処理を設定することができ、NotLoadedすることができた項目は、（活字体のために申し訳ありません）列挙し、デフォルト値可能性があり、データのロードの進行状況を監視するために店に一つの項目を追加することです「エラー」または「完了」を設定できます。親リストでは、あなたが小道具をintこのアイテムを追加する必要がありますし、方法をレンダリングに使用すると、データ等のエラーメッセージの進行状況を表示することができ

/** Init enum */ 
export enum Init { 
    NotLoaded = 0, 
    Done = 1, 
    Error = 2, 
    Processing = 3 
} 

あなたができるようになるよりも、状態の進行状態をエラーに反応するなど