React bileşeni durum değiştiğinde güncellenmiyor

Question

API aramasından veri içeren bir seçim yerleştirmeye çalışıyorum. Seçim işlenir ve sonra veriler geri geldiğinde, seçimin seçeneklerini doldurmasını isterim. Veriler geri geldiğinde ve this.state.tagList ürününü bileşen için bir pervane olarak geçirirken tagList durumunu ayarlıyorum. Ancak durumu güncellediğimde, bileşen güncellenmiyor.

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

** Not: Benim kod Ayrıca aşağıdaki hatayı alıyorum. Bir proje ** ile bir meslektaş yardım etmeye çalışıyorum

seçme bileşen:

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

Ana bileşen:

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

setState yılında gotTags içine çağrıldığında Uncaught Invariant Violation atılıyor ana bileşen.

Answer 1

: Ayrıca https://github.com/reactjs/react-modal

, tepki-bootstrap bakmak Semantik kullanıcı arabirimindeki modellerde, show modelini kullandığınızda, DOM'u "göstermek" için DOM'de taşır. Bu nedenle sanal DOM React hakkında bilgi sahibi gerçek DOM'den farklıdır. Bu, atılacak hatanın nedenidir. DOM hareket etmesini modal tutmak için sizin gibi false için detachable özelliğini ayarlamanız gerekir:

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

Sonra modal sanal ve gerçek DOM hem de aynı noktada olduğunu ve onunla etkileşime devam edebilirsiniz React .

Answer 2

Birkaç jQuery eklentisi DOM'yi doğrudan düzenliyor gibi görünüyor. JQuery UI kullanıyorsunuz, bu da DOM'ı düzenleme ile oldukça liberal bir şey ... eğer mümkünse, ReactJ'ler için tasarlanmış eklentileri kullanın. Yeni başlayanlar için

aşağıdaki değiştirmeyi deneyin: ile

jQuery açılan: https://github.com/JedWatson/react-select

jQuery ile modal: http://react-bootstrap.github.io/