Реагировать модальный - инвариантное нарушение

Question

У меня есть приложение Реагировать, который использует Bootstrap модальность:

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

Ситуация становится более сложной, когда дети перемешиваются вокруг (как и в результатах поиска), или, если новые компоненты добавляются на перед списком (как в потоках). В этих случаях, когда личность и состояние каждого ребенка должна поддерживаться через рендеринг проходов, вы можете однозначно идентифицировать каждый ребенок, присвоив ему ключ

Для получения дополнительной информации см https://facebook.github.io/react/docs/multiple-components.html#dynamic-children