React組件沒有在狀態變化時更新

Question

我正在嘗試使用來自API調用的數據填充選擇。選擇被渲染，然後當數據返回時，我希望它填充選擇的選項。當數據返回時，我將tagList設置爲狀態，並通過this.state.tagList作爲組件的支持。但是當我更新狀態時，它不更新組件。也收到以下錯誤：

Uncaught Invariant Violation: findComponentRoot(..., .3.2.0.0.0.1): 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 ``.

**注：不是我的代碼。想幫同事帶項目**

選擇組件：

'use strict' 

import React from 'react'; 
import classNames from 'classnames'; 
//import ReactDOM from 'react-dom'; 

var TagBar = React.createClass({ 

    propTypes: { 
     tagList: React.PropTypes.array.isRequired 
    }, 

    render: function() { 

     return(
       <select ref="tagBar" className="searchbar ui multiple fluid search dropdown" multiple>        
        { 
         this.props.tagList.map(function(tag){ 
          return <option key={tag._id} value={tag.tag}>{tag.tag}</option>; 
         }) 
        }    
       </select> 
     ) 
    } 
}); 

export default TagBar; 

主要成份：

'use strict' 

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import TagBar from '../../components/tagbar'; 

import InterviewAPI from '../api.js'; 

var AddEditQuestion = React.createClass({ 

    propTypes: { 
     action: React.PropTypes.string.isRequired 
    }, 

    getInitialState: function() { 

     var details = {}; 

     switch (this.props.action) {    

      case 'add': 
      //init an empty props object 
      details = { 
       text: '', 
       tech: '', 
       tags: {}, 
       level: 0, 
       answer: ''    
      }    
      break; 

      case 'edit': 
      //the details are passed in as props 
      details = this.props.details 
      break; 

     } 


     //add is the default action 
     return { 
      action: this.props.action, 
      details: details, 
      tagList: [] 
     } 
    }, 

    render: function() { 

     return(
      <div ref="addQuestionModal" className="ui modal addQuestionModal"> 
       <i className="close icon"></i> 
       <div className="header"> 
        {this.state.action} Question 
       </div> 
       <div className="content"> 
        <div className="description"> 
         <div className="ui form"> 
           <div className="field"> 
            <label htmlFor="questionText">Question</label> 
            <textarea id="questionText" value={this.state.details.text}></textarea> 
           </div>       

           <div className="field"> 
            <label htmlFor="questionAnswer">Answer</label> 
            <textarea id="questionAnswer" value={this.state.details.answer}></textarea> 
           </div>  
           <div className="field"> 
            <label htmlFor="questionTags">Tags</label> 
            <TagBar tagType='question' action={this.state.action} tagList={this.state.tagList} />                        
           </div> 
           <div className="ui two column grid"> 
            <div className="row"> 
             <div className="column"> 
              <div className="field"> 
               <label htmlFor="questionTech">Technology</label> 
               <select ref="questionTech" id="questionTech" name="questionTech"> 
                <option value="">select...</option> 
                <option value="js">Javascript</option> 
                <option value="net">.NET</option> 
                <option value="mobile">Mobile</option>                          
               </select> 
              </div> 
             </div> 
             <div className="column"> 
              <div className="field column"> 
                <label htmlFor="questionLevel">Level</label> 
                <select ref="questionLevel" id="questionLevel" name="questionLevel"> 
                 <option value="">select...</option> 
                 <option value="junior">Junior</option> 
                 <option value="senior">Senior</option> 
                </select> 
              </div>           
             </div>           
            </div> 
           </div>                                     
         </div>     
        </div> 
       </div> 
       <div className="actions"> 
        <div className="ui middle aligned two column grid"> 
         <div className="row">        
          <div ref="deleteAction" className="left aligned column"> 
           {/* based on the state of the modal, this will show different buttons */}      
          </div> 
          <div ref="actionButtons" className="right aligned column actionButtons"> 
           {/* based on the state of the modal, this will show different buttons */} 

          </div> 
         </div> 
        </div> 
       </div> 
      </div>    
     )    
    }, 

    componentWillMount: function() { 
     this.getTags(); 
    }, 

    componentDidMount: function() { 
     //initialize select dropdowns 
     $(this.refs.tagBar).dropdown(); 
     $(this.refs.questionTech).dropdown(); 
     $(this.refs.questionLevel).dropdown(); 

     //display the action buttons (based on whether you're adding or editing) 
     this.displayActionButtons(); 

     //once the modal is rendered, go ahead and open it   
     $(this.refs.addQuestionModal).modal('show'); 
    }, 

    getTags: function() { 
     var apiPath = InterviewAPI.routes.basePath + InterviewAPI.routes.realm.questionTags; 

     //make the api call, passing result to callback 
     $.get(apiPath, this.gotTags);   
    }, 
    gotTags: function(result) { 
     var options = []; 

     if (result.length > 0) { 
      //if you got tags back, add them to the dropdown 
      this.setState({ 
       tagList: result 
      });          
     } 
    }, 

    handleAddQuestion: function() { 
     console.log('add question'); 
    }, 

    closeModal: function() { 
     $(this.refs.addQuestionModal).modal('hide'); 
    },  
}); 

export default AddEditQuestion; 

的Uncaught Invariant Violation當setState被稱爲內gotTags在被拋出主要組成部分。

Answer 1

在語義UI中使用模態時，當您使用模態時，它會將其移動到DOM中以「顯示」它。因此，虛擬DOM React知道的與真實的DOM不同。這是導致錯誤被拋出的原因。爲了保持模式從DOM移動需要將detachable屬性設置爲false，如：

$('.addQuestionModal').modal({detachable:false}).modal('show'); 

然後模態是在兩個虛擬的和實際的DOM的相同點和反應可以繼續與其交互。

Answer 2

它看起來像一對夫婦jQuery插件直接編輯DOM，引發反應。看起來你正在使用jQuery UI，這對編輯DOM非常自由...如果可能的話，使用爲ReactJs設計的插件。

對於初學者來說，嘗試更換如下：與

jQuery的下拉菜單：https://github.com/JedWatson/react-select

jQuery的模態有：https://github.com/reactjs/react-modal

另外，看看反應的自舉：http://react-bootstrap.github.io/