Reactjs 在react组件中获取空指针异常

我正在做一个API调用并获取PatientPage.js中componentDidMount中的数据。由于呈现PatientList.js时render方法在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>
            );

        }
    }

类PatientPage扩展组件{
静态类型={
patientState:PropTypes.object.isRequired，
fetchPatientList:PropTypes.func.isRequired，
};
组件willmount（）{
this.props.fetchPatientList（）；
}
render（）{
返回(
);
}
}

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;

import React，{Component，PropTypes}来自'React'；
从“Util”导入{dateFormatter}；
从“react bootstrap table”导入{BootstrapTable，TableHeaderColumn}；
类PatientList扩展组件{
静态类型={
patientList:PropTypes.Object，
};
render（）{
const data=this.props.patientList；
返回(
患者ID
患者姓名
患者类型
);
}
}
导出默认耐心列表；

您可以做的是检查PatientList组件中的PatientList道具是否为空或不为空。若该值为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;

您将能够对错误状态、进度状态等做出反应

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