React 中的状态更改后组件未重新渲染

Question

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

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

状态正在正确更新。我已经测试过了，但组件没有重新渲染。令我惊讶的是，如果我只是在同一个组件中显示列表，那么它会重新渲染 correctly.any 帮助是感激的！

Answer 1

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

拖动项目时，数组中的位置（索引）会发生变化。这会阻止 React 同步正确的元素。 Prop/state 更改可能无法按需要传播。

React 中的状态更改后组件未重新渲染

Component is not re rendering after state change in react

reactjs