Question

我正在进行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;

Answer 1

您可以做的是在PatientList组件中检查PatientList props是否为null。如果value为null，则可以呈现进度并按下“正在加载数据”或返回空div，当fetch完成时，您可以安全地呈现内容。

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;

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

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

比你能对错误状态进展状态等作出反应

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

1 个答案: