未捕获RangeError：超出最大调用堆栈大小|反应JS

Question

尝试渲染React组件时出现以下错误。

我的组件中没有componentDidMount，componentWillReceiveProps或componentDidUpdate函数。

在没有任何状态或模型更改的情况下重新渲染组件。

  var React = require('react');
var UiView = require('lib/ui/ui-view');
var LabelUtil = require('lib/common/util/label-util');
var _ = require('underscore');
var Spark = require('sabre-spark');
var SectionAddOrUpdateModal = require('./section-add-update-modal.jsx');

const ElementId = {
    AddSection: "add-section",
    SearchSection: "search-section"
};

const nameMaxLength = 80;
const codeMaxLength = 20;
const descriptionMaxLength = 200;

var SectionAddOrUpdateModal = UiView.createClass({
    displayName: "SectionAddOrUpdateModalContainerView",

    getInitialState: function() {
        return {
            status: 1,
            name: '',
            code: '',
            description: '',
            isAssignRoomsView: false,
            isRoomsSelected: false,
            isAddSectionClicked: false,
            isEditSection: false,
            isAllRooms: false,
            isLoading: false
        };
    },

    handleAddSectionButton: function() {
        if(this.state.isEditSection) {
            this.setState(this.getInitialState());
        }
    },

    handleStatusOnChange: function(newStatus) {
        var computedStatus = (newStatus == 'active' ? 1 : 0 );
        this.setState({
            status: computedStatus
        });
    },

    handleNameOnChange: function(newName) {
        var nameValidFormat = /^[a-z0-9\s]*$/i;
        var isNameValidFormat = (nameValidFormat.test(newName) && newName.length <= nameMaxLength);
        if(isNameValidFormat) {
            this.setState({
                name: newName
            });
        }
    },

    handleCodeOnChange: function(newCode) {
        var codeValidFormat = /^[a-z0-9]*$/i;
        var isCodeValidFormat = (codeValidFormat.test(newCode) && newCode.length <= codeMaxLength);
        var computedCode = null;
        if(isCodeValidFormat && !this.state.isEditSection) {
            computedCode = newCode.toUpperCase();

            this.setState({
                code: computedCode
            });
        }
    },

    handleDescriptionOnChange: function(newDescription) {
        var descriptionValidFormat = /^[a-z0-9\s]*$/i;
        var isDescriptionValidFormat = (descriptionValidFormat.test(newDescription) && newDescription.length <= descriptionMaxLength);
        if(isDescriptionValidFormat) {
            this.setState({
                description: newDescription
            });
        }
    },

    handleAddButton: function() {
        var context = this.getContext();
        var property = context.propertyInfo.get('property');
        var sectionsList = this.getModel().get('housekeepingSections');
        var section = _.findWhere(sectionsList, {code: this.state.code});
        var sectionGuid = section && section.sectionGuid || '';

        var sectionData = {
            property: property,
            code: this.state.code,
            name: this.state.name,
            description: this.state.description,
            selectedRooms: this.state.selectedRooms,
            status: this.state.status,
            sectionGuid: sectionGuid
        };

        if(this.state.isEditSection) {
            this.dispatchAction("editSection", sectionData);
        } else {
            this.dispatchAction("saveNewSection", sectionData);
        }

        this.setState({
            isAddSectionClicked: true,
            isLoading: true
        });
    },

    handleCancelButton: function() {
        this.setState(this.getInitialState());
    },

    handleAssignRoomsLinkOnClick: function() {
        this.setState({
            isAssignRoomsView: true
        });
    },

    handleSelectAssignRoomsOnClick: function() {
        this.setState({
            isRoomsSelected: true,
            isAssignRoomsView: false
        });
    },

    handleCancelAssignRoomsOnClick: function() {
        this.setState({
            isAssignRoomsView: false
        });
    },

    getAddButtonEnabledStatus: function() {
        var sectionsList = this.getModel().get('housekeepingSections');
        var isEditSection = this.state.isEditSection;
        var isCodeAlreadyExist = !!_.findWhere(sectionsList, {code: this.state.code});
        var isNameAlreadyExist = !!_.findWhere(sectionsList, {name: this.state.name});
        var createButtonStatus = this.state.code == '' || this.state.name == '' || isNameAlreadyExist || isCodeAlreadyExist || this.state.isEditSection;
        var isStatusNameCodeDescriptionAlreadyExist = _.where(sectionsList, {
                                                                                code: this.state.code,
                                                                                name: this.state.name,
                                                                                description: this.state.description,
                                                                                status: this.state.status
                                                                            }).length > 0;

        return (isEditSection ? (isStatusNameCodeDescriptionAlreadyExist || this.state.name == '') : (this.state.code == '' || this.state.name == '' || isNameAlreadyExist || (isCodeAlreadyExist && !this.state.isEditSection) || isStatusNameCodeDescriptionAlreadyExist));
    },

    render: function() {
        var context = this.getContext();
        var model = this.getModel();
        var isAddButtonEnabled = this.getAddButtonEnabledStatus();
        var modalId = (this.props.fromView + (this.props.modalId ? this.props.modalId : ''));

        return (
            <div className="spark-modal" id={modalId}>
                <SectionAddOrUpdateModal
                        context={context}
                        model={model}
                        status={this.state.status}
                        statusOnChangeHandler={this.handleStatusOnChange}
                        name={this.state.name}
                        nameOnChangeHandler={this.handleNameOnChange}
                        code={this.state.code}
                        codeOnChangeHandler={this.handleCodeOnChange}
                        description={this.state.description}
                        descriptionOnChangeHandler={this.handleDescriptionOnChange}
                        assignRoomsLinkOnClickHandler={this.handleAssignRoomsLinkOnClick}
                        roomsListData={this.props.roomsListData}
                        isAssignRoomsView={this.state.isAssignRoomsView}
                        cancelOnClickHandler={this.handleCancelButton}
                        isAddButtonEnabled={isAddButtonEnabled}
                        addButtonOnClickHandler={this.handleAddButton}
                        selectAssignRoomsOnClickHandler={this.handleSelectAssignRoomsOnClick}
                        isRoomsSelected={this.state.isRoomsSelected}
                        cancelAssignRoomsOnClickHandler={this.props.cancelAssignRoomsOnClickHandler}
                        fromView={this.state.isEditSection}
                />
            </div>
        );
    }
});
module.exports = SectionAddOrUpdateModal;


Error:
commons.js:21317 Uncaught RangeError: Maximum call stack size exceeded
at Function.<anonymous> (commons.js:21317)
at Function._.matcher._.matches (commons.js:22525)
at Function._.findWhere (commons.js:21513)
at Constructor.getAddButtonEnabledStatus (housekeeping-sections.js:4497)
at Constructor.render [as viewRender] (housekeeping-sections.js:4513)
at Constructor.renderWithAuthorization [as render] (commons.js:61711)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (commons.js:48921)
at ReactCompositeComponentWrapper._renderValidatedComponent (commons.js:48941)
at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (commons.js:42672)
at ReactCompositeComponentWrapper.mountComponent (commons.js:48554)