Блог

Я пытаюсь реализовать панель в React с помощью React-Bootstrap

Все идет нормально, пока я не добавлю тег. Panel.Body

Затем я получаю эту ошибку

bundle.js?1.3.9:115023 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toUpperCase')

найдите questionnaire_list() функцию

     import React, { Component, PropTypes } from 'react';
    var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
    import { sortColumn } from 'reactabular';
    import MsgActions from '../../../shared/actions/MsgActions';
    import SettingsStore from '../../../shared/stores/SettingsStore';
    import CustomizationActions from '../../../shared/actions/CustomizationActions';
    import CustomizationStore from '../../../shared/stores/CustomizationStore';
    import util from '../../../util/MelaUtil';
    import Grid from '../../../dumb/Grid.react';
    import {Row, Col, Table, Modal} from 'react-bootstrap';
    import Can from '../../../shared/constants/Can';
    import AppStore from '../../../shared/stores/AppStore';
    import P from '../../../shared/constants/Can';
    import _ from 'lodash';
    var Alert = require('react-bootstrap').Alert;
    var ListGroup = require('react-bootstrap').ListGroup;
    var Panel = require('react-bootstrap').Panel;
    var ListGroupItem = require('react-bootstrap').ListGroupItem;
    var Button = require('react-bootstrap').Button;
    var Glyphicon = require('react-bootstrap').Glyphicon;
    var PanelGroup = require('react-bootstrap').PanelGroup


class Questionnaires extends Component {
        constructor(props) {
            super(props);
            this.state = {
                questionnaires      : CustomizationActions.getAllQuestionnaires(),
                key                 : null,
            };
            // this._handleClick = this._handleClick.bind(this);
            this._onChange = this._onChange.bind(this);
            this._getAllQuestionnaires = this._getAllQuestionnaires.bind(this);
        }
    
        /**
         * LISTENING TO CHANGES FROM STORE
         */
        componentDidMount() {
            CustomizationStore.addChangeListener(this._onChange);
            MsgActions.setVeil(null);
        }
    
        componentWillUnmount() {
            CustomizationStore.removeChangeListener(this._onChange);
        }
    
        _onChange() {
            let questionnaires = CustomizationStore.getQuestionnaires();
            this.setState({questionnaires});
        }
    
        _getAllQuestionnaires(){
            let questionnaires = CustomizationActions.getAllQuestionnaires();
            this.setState({questionnaires});
        }
    
    
        questionnaire_list(){
            
            return (
                this.state.questionnaires.map((row, index) => {
    
                    let PanelState = {};
                    let panelName = `panel-${row.id}`;
                    PanelState[panelName] = !this.state[panelName];
    
                    return (
                        <div key={`item-${row.id}`}>
                            <ListGroupItem className={this.state.key} onClick={ ()=>this.setState(PanelState) }>{row.description}</ListGroupItem>
                            <Panel className="groups-items-panel" expanded={this.state[panelName]}>
                                


                                <Panel.Body collapsible>  <=====    HERE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                                    <ListGroupItem >Apple</ListGroupItem>
                                    <ListGroupItem >Pear</ListGroupItem>
                                </Panel.Body>
                            </Panel>
                        </div>
                    )
                })
            );
        }
    
    
    
    
        /****************************************************/
        render() {
            const spacer = {lineHeight: '5px'};
            const prefs = SettingsStore.getPreferences();
            let disabled = !AppStore.can(P.PATIENT_EDIT);
            return (
                <div className="col-lg-8 col-lg-offset-2 col-xs-12 col-xs-offset-0" style={{marginTop: 25}}>
    
                    <div className="demographicsTab">
                        <Row className="content-main oddContainer">
                            <Col>
                                <div className="panel panel_form">
                                    <div className="panel-heading">
                                        <h3>Questionnaire Customisation</h3>
                                    </div>
                                    <div className="panel-body">
    
                                        <Row>
                                            <Col xs={12}>
                                                <div className="content-main row">
                                                    <div className="col-xs-12">
                                                        <Button disabled={disabled} onClick={(e)=>{this._openAddOPCS();util.stopEvent(e);}}>
                                                            New
                                                        </Button>
                                                        <Button disabled={disabled} onClick={(e)=>{this._getAllQuestionnaires();util.stopEvent(e);}}>
                                                            All
                                                        </Button>
                                                    </div>
                                                </div>
                                            </Col>
                                        </Row>
    
                                        <Row style={spacer}><Col xs={12}>amp;nbsp;</Col></Row>
    
                                        <Row style={{marginBottom: '30px'}}>
                                            <Col xs={12}>
                                                <div className="content-main row">
                                                    <div className="col-xs-12">
                                                        {(!_.isEmpty(this.state.questionnaires)) ? this.questionnaire_list() : null}
                                                    </div>
                                                </div>
                                            </Col>
                                        </Row>
    
                                    </div>
                                </div>
                            </Col>
                        </Row>
                    </div>
    
                </div>
            );
        }
    }
    
    module.exports = Questionnaires;