在反应组件中获取空指针异常答案

【问题标题】：Getting an null pointer exception in react component在反应组件中获取空指针异常
【发布时间】：2017-06-16 01:17:52
【问题描述】：

我正在执行 API 调用并在 PatientPage.js 的 componentDidMount 中获取数据。由于渲染 PatientList.js 时在 componentDidMount 之前调用了渲染方法，因此我在 PatientList bootstrapTable 中遇到错误。原因是由于数据还没有被抓取，所以 PatientList 中的 'data'(this.props.patientList) 属性为空。

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;

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

您可以做的是检查 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;

我的建议是添加一项来监控加载数据的进度，项目可以是枚举（对不起TypeScript），默认值可以是NotLoaded，当你开始加载数据时你可以设置处理最后你可以设置错误或完成。在 Parent 列表中，您必须添加此项 int props，在 render 方法中您可以显示数据错误消息进度等。

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

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

【讨论】：