javascript - React 模态 - 不变违规

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

Uncaught Error: Invariant Violation: findComponentRoot(..., ...$110): Unable to find element. This probably means the DOM was unexpectedly mutated是一个类似的问题，但我不使用任何表格

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

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>

The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a key

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