React 구성 요소가 업데이트되지 않습니다.

Question

내 응용 프로그램에 React와 Redux를 사용하고 있습니다. 내 구성 요소 위치가 업데이트되지 않는 동일한 유형의 내 질문을 끌 때 동적 양식이 있습니다. 내가

JqueryUI Sortable을 사용하고 드래그를 들어 내 질문 개체 : 내가 질문 제목의 텍스트를 변경하는 경우

var questions : [ 
    {"name" : "Question Title", "title" : "Question Title", "type" : "text"}, 
    {"name" : "Question Title", "title" : "Question Title", "type" : "text"} 
] 

이

class QuestionTitle extends React.Component{ 
    constructor(props){ 
     super(props) 
     this.showTextBox = this.showTextBox.bind(this) 
    } 
    showTextBox(content, id, type, choiceIndex){ 
     if(type != 'image'){ 
      this.props.showTextBox(content, id, type, choiceIndex); 
     } 
    } 
    render(){ 
     return(
      <span id={"title_"+this.props.questionNumber} 
      onClick={this.showTextBox.bind(this, this.props.data.title , 
       'title_'+this.props.questionNumber, 'question_title', null)} > 
       {this.props.data.title} 
      </span> 
     ) 
    } 
} 

이제 구성 요소

class SingleTextQuestion extends React.Component{ 
    constructor(props){ 
     super(props) 

    } 
    componentDidMount(){ 
     let draggableFunction = new utilityFunction(); 
     draggableFunction.addDraggableFeature('divQuestion_container'); 
    } 
    render(){ 
     //create span or textbox based upon edit mode 
     let element = Symbol(); 

     element = (<QuestionTitle questionNumber={this.props.questionNumber} data={this.props.data} key={this.props.key} />) 


     return (
      <div id={"div_"+this.props.questionNumber} className="div_commonId" key={this.props.key}> 
       <div className='icons_parent'> 
        <DragIcon /> 
        <DeleteButon questionNumber={this.props.questionNumber} /> 
       </div> 
       <div id={"q_no_title_"+this.props.questionNumber} className="q_no_title_class"> 
        <QuestionNumber questionNumber={this.props.questionNumber}/> 
        <div id={"title_q"+this.props.questionNumber} className="question-title"> 
         {element} 
        </div> 
       </div> 
       <div id={"typeDiv_"+this.props.questionNumber}> 
         <input id={"optionTypeElem_0_"+this.props.questionNumber}/> 
       </div> 
      </div> 
     ) 
    } 
} 

질문 제목 요소 반작용 상태가 업데이트되고 제목이 변경되었습니다. 그리고 질문을 2에서 1로 드래그하면 내 질문 배열도 업데이트됩니다. 텍스트 :

var questions : [ 
    {"name" : "Question Title", "title" : "Question Title Changed", "type" : "text"}, 
    {"name" : "Question Title", "title" : "Question Title", "type" : "text"} 
] 

질문이 내가 같은 종류의 예의 질문을 끌 경우이 무슨 일이 생긴, 그것이 동일한 위치에 남아있다. 질문 유형은 질문 객체에 정의됩니다.

Answer 1

렌더링하는 모든 목록에 대해 각 목록 항목에는 데이터를 식별 할 수있는 방법이 있어야합니다 (데이터가 데이터베이스에 저장되는 방식과 유사 함). 따라서 각 질문에 id 속성을 입력 할 수 있습니다 (질문마다 고유 한 경우 생성 방법과 상관 없습니다). 그런 다음 반응을 사용하여 렌더링 할 때 해당 속성을 키로 사용할 수 있습니다.

Answer 2

key을 구성 요소에 추가하면 문제가 해결됩니다. 오브젝트를 생성 할 때

는 내 데이터

var questions : [ 
    {"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 123}, 
    {"name" : "Question Title", "title" : "Question Title", "type" : "text", "key_rand" : 223} 
] 

열쇠를 첨부 그래서 내가 key_rand 또한 컴포넌트를 렌더링하는 변화 드래그 후 배열 인덱스를 갱신 할 때마다.