反應模態-不變違反

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