狀態改變后組件不會重新渲染

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無法跟蹤項目，因為您正在使用索引作為鍵（ 不鼓勵使用 ）。 嘗試根據粘貼在項目上的生成的uuid來創建唯一鍵。

拖動項目時，數組中的位置（索引）會更改。 這會阻止React同步正確的元素。 道具/狀態更改可能不會按需要傳播。