模态上的React-不变量冲突

我有一个模态，它有一个带Categories的下拉列表。选择"类别"时，将呈现一个包含"分类"的下拉列表。如果选择"分类"，则会渲染另一个组件。

当我第一次选择类别和分类时，它工作得很好。然而，如果我想再次选择一个类别，我会得到以下错误：

Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.1.0.0.1.0.2.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

我查了一下，但通常在使用<table>组件时会出现这种情况。我没有使用<table>。

模态的代码在下面：

  getInitialState: function() {
        return {categorySelected: false};
    },
    handleSelectCat: function(event)   {
        var index = event.target.value;
        this.setState({categorySelected: true});
        this.setState({classificationSelected: false});
        var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
            return <option value={index}><a href="#">{elem.description}</a></option>
        });
        this.setState({classificationDesc: classificationDesc});
    },
    handleSelectClass: function(event) {
        var index = event.target.value;
        this.setState({classificationSelected: true});
    },
    closeModal: function()  {
        this.setState({categorySelected: false});
        this.setState({classificationSelected: false});
    },
    render: function() {
        var categoryDesc = this.props.categories.map(function (elem, index) {
            return <option value={index}>{elem.description}</option>
        });
        return (
        <div id="newListModal" className="modal fade" role="dialog">
            <div className="modal-dialog">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal">&times;</button>
                        <h4 className="modal-title">Create new list</h4>
                    </div>
                    <div className="modal-body">
                        <div>
                            <p>Select category</p>
                            <select class="form-control" onChange={this.handleSelectCat}>
                                {categoryDesc}
                            </select>
                            {this.state.categorySelected == true
                                ?
                                <div>
                                    <p>Select classification</p>
                                    <select class="form-control" onChange={this.handleSelectClass}>
                                        {this.state.classificationDesc}
                                    </select>
                                </div>
                                :
                                <div></div>}
                            {this.state.classificationSelected == true
                             ?
                                <ListAddition classification={this.props.data}/>
                             :
                                <div></div>
                            }
                        </div>
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.closeModal}>Close</button>
                    </div>
                </div>
            </div>
        </div>
        )
    }