Question

在处理我的项目时，我遇到了这个问题并尝试了两天来解决它。最后我决定把它发布在这里。我通过调用子组件来渲染数组，如下所示： - 父组件

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

状态正在正确更新。我测试了它，但组件没有重新渲染。让我感到惊讶的是，如果我只是在同一个组件中显示列表，那么它就会正确呈现。非常感谢！

Answer 1

React无法跟踪项目，因为您使用索引作为键（discouraged）。尝试创建一个基于生成的uuid之类的东西来创建一个唯一的键。

拖动项目时，数组中的位置（索引）会发生变化。这可以防止React同步正确的元素。提议/状态更改可能不会按预期传播。

反应状态发生变化后，组件不会重新渲染

1 个答案: