React组件不会更新

时间:2016-12-11 11:11:26

标签: jquery-ui reactjs redux react-redux react-dom

我正在为我的应用程序使用React和Redux。当我拖动相同类型的问题时,我有一个动态表单,我的组件位置不会更新。 拖动我正在使用JqueryUI Sortable

我的问题对象:

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

反应组件

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

问题标题组件

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

现在,如果我更改问题标题的文本,状态会更新并且标题会更改。当我将问题从2拖到1.我也更新了我的问题数组。

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

问题2仍然处于同一位置,如果我拖动相同类型的问题,例如:文本,则会发生这种情况。问题类型在问题对象中定义。

2 个答案:

答案 0 :(得分:1)

对于您要呈现的任何列表,每个列表项都应该有一种方法来识别它(类似于数据存储在数据库中的方式,对吧?)。因此,您可以为每个问题设置一个id属性(只要它们对每个问题都是唯一的,您的生成方式并不重要)。然后,您可以在使用react进行渲染时将该属性用作键。

答案 1 :(得分:0)

通过向组件添加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之后更新数组索引时,也会更改渲染组件。