[英]Component is not re rendering after state change in react
在处理我的项目时,我遇到了这个问题,并尝试了两天来解决它。 最后,我决定将其发布在这里。 我通过调用子组件来渲染数组,如下所示:
父组件
{this.state.list.map((item,index)=>{
return <RenderList
insert={this.insert.bind(this,index)}
index={index}
length={this.state.list.length}
EnterPressed={this.childEnterPressed.bind(this,index)}
list={item}
onchange={this.childChange.bind(this)}
editable={this.state.editable[index]}
key={index}
onclick={this.tagClicked.bind(this,index)} />
})}
和
子组件
<Draggable grid={[37, 37]}
onStop={this.handleDrop.bind(this)}
axis="y"
onDrag={this.handleDrag.bind(this)}
bounds={{top: -100, left: 0, right: 0, bottom: 100}}
>
<div onClick={this.tagClicked.bind(this)}>
{ this.props.editable ? (<Input
type="text"
label="Edit Item"
id="listItem"
name="listItem"
onKeyPress={this.handleKeyPress.bind(this)}
defaultValue={this.props.list}
onChange={this.onChange.bind(this)} />) :
(<Chip>{this.props.list}</Chip>) }
</div>
</Draggable>
我正在使用react-draggble使列表中的每个项目都可拖动。 当在handleDrag函数中拖动ot时,我只是在更新组件拖动的距离状态,而在handleDrop函数中,我调用的是insert函数,该函数从当前位置删除被拖动的项目,并在其放置的位置插入。
insert=function(index,y,e){
if(y!==0){
var list=this.state.list;
var editable = Array(this.state.editable.length).fill(false);
if(y/37>0){
var temp=list[index];
var i=0;
for(i=index;i<index+y/37;i++){
list[i]=this.state.list[i+1];
}
list[(y/37)+index]=temp;
this.setState({
...this.state,
list:list,
editable:editable
})
}
}
状态正在正确更新。 我已经测试过了,但是组件没有重新渲染。 令我惊讶的是,如果我只在相同的组件中显示列表,那么它将重新正确呈现。感谢您的帮助!
React无法跟踪项目,因为您正在使用索引作为键( 不鼓励使用 )。 尝试根据粘贴在项目上的生成的uuid来创建唯一键。
拖动项目时,数组中的位置(索引)会更改。 这会阻止React同步正确的元素。 道具/状态更改可能不会按需要传播。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.