反应-模态不变违反

Question

我有一个带有类别下拉列表的模式。 选择类别时，将显示带有分类的下拉列表。 如果选择分类，则会呈现另一个组件。

第一次选择类别和分类时，效果很好。 但是，如果我想再次选择一个类别，则会出现以下错误：

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>
        )
    }

Answer 1

  var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
        return <option value={index}><a href="#">{elem.description}</a></option>
    });

您在<option>内有一个<a>标记。 这不是标准的，浏览器可能会删除它与React vDOM冲突