反应模态-不变违反

Question

我有一个使用Bootstrap模式的React应用程序：

<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.handleSelect}>
                        {categoryDesc}
                    </select>
                    {this.state.categorySelected == true
                        ?
                        <div>
                            <p>Select classification</p>
                            <select class="form-control">
                                {this.state.classificationDesc}
                            </select>
                        </div>
                        :
                        <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>

我有两个下拉菜单。 第一次选择它们时，一切都很好。 但是，如果我尝试再次选择第一个，则会得到：

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 ``

未捕获的错误：不断违反：findComponentRoot（...，... $ 110）：无法找到元素。 这可能意味着DOM被意外地突变是一个类似的问题，但我不使用任何表

关于导致此错误的原因有什么想法？

Answer 1

您需要为所有有活力的孩子传递一个独特的key道具

   <p>Select category</p>
   <select class="form-control" onChange={this.handleSelect}>
    {this.props.categories.map(function (elem, index) { 
       return (
        <option value={index} key={"category" + index}>
          <a href="#">{elem.description}</a>
        </option>
       );
    })}
   </select>

当孩子们随机移动（如在搜索结果中）或将新组件添加到列表的开头（如在流中）时，情况变得更加复杂。 在这些情况下，必须在渲染过程中维护每个孩子的身份和状态，您可以通过为每个孩子分配一个密钥来唯一地标识每个孩子

有关更多信息，请参见https://facebook.github.io/react/docs/multiple-components.html#dynamic-children