在反應組件中獲取空指針異常

Question

我正在做一個API調用並獲取PatientPage.js中componentDidMount中的數據。由於呈現方法在呈現PatientList.js時在componentDidMount之前調用，因此在PatientList引導表中收到錯誤。原因是由於尚未獲取數據，因此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組件。如果value爲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 
} 

比你將能夠應對錯誤狀態的進展狀態等