Javascript React Dragula在删除列表项时未呈现html

我正在开发react js应用程序，我使用“react dragula”拖放列表项。我正在父包装器组件中显示子组件html的预览。删除元素后，我的html无法正确呈现。我不知道这是因为德拉古拉还是其他问题。 在删除列表项之后，我将根据元素索引更新列表值，并更新状态并重新呈现子组件。但它向我展示了旧的html，它没有使用父组件返回的更新的道具重新呈现子组件的html

这是我的密码：

class App extends React.Component {
    drake = null;
    socialContainers = [];

    /** lifecycle method */
    componentDidMount() {
        this.drake = Dragula(this.socialContainers, {
            isContainer: function (el) {
                return (el.id === 'social-container');
            },
            moves: function (el, source, handle, sibling) {
                return (handle.id === "socialSortBtn");
            },
            accepts: function (el, target, source, sibling) {
                return (target.id === 'social-container' && source.id === 'social-container');
            },
        });
        this.drake.on('drop', (el, target, source, sibling) => {
            el.style.cursor = "grab";
            let oldIndex = el.dataset.index
            let type = el.dataset.type
            let iconIndx = Array.prototype.indexOf.call(target.children, el);
            let targetIndex = iconIndx > 0 ? iconIndx : 0;
            if (type) {
                let content = {}
                content.reOrder = true;
                content.oldIndex = oldIndex;
                this.props.callback(content, 'content', targetIndex)
            }
        });
        this.drake.on('drag', (el, source) => {
            el.style.cursor="grabbing";
        })
    }

    updateLinkText(val, index) {
        const { data, callback } = this.props;
        let textParsedHtml = new DOMParser().parseFromString(data.content[index].text, 'text/html');
        if (textParsedHtml.getElementsByTagName("a")[0]) {
            textParsedHtml.getElementsByTagName("a")[0].innerHTML = val;
        }
        let content = {}
        content.changeLinkTxt = true
        content.linkText = val
        content.linkTextHtml = textParsedHtml.body.innerHTML
        //update content
        callback(content, 'content', index)
    }

    onSelectShareOpt(selectedVal, selectedIndx, event) {
        event.stopPropagation();
        let socialObj = socialShareArr.find((obj) => obj.value === selectedVal)
        if (socialObj) {
            let htmlObj = this.getHTMLObj(socialObj);
            let content = {}
            content.active_social_icons = socialObj
            if(htmlObj) { content.content = htmlObj }
            // update content
            this.props.callback(content, 'content', selectedIndx)
        }   
    }

    isIconDisabled = (data, val) => {
        let found = false;
        found = data.some(function (obj) {
            if (obj.value === val) {
                return true;
            }
            return false;
        });
        return found;
    }

    renderSocialIcons(dragulaDecoratorRef) {
        const { data } = this.props;
        let socialIcons = data.activeIcons;
        if (!socialIcons) {
            return null
        }
        return (
            <Fragment>
                {socialIcons && socialIcons.length > 0 && socialIcons.map((activeIcon, index) => (
                    <li key={index} data-index={index} data-type={activeIcon.value} className="mb-30">
                        <div className="mr-2">
                            <button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
                            </button>
                        </div>
                        <div className="mb-30">
                            <img className="mr-2" src={activeIcon.icon} alt="social-icon" width="36" height="36" />
                            <FormControl
                                value={activeIcon.value}
                                as="select"
                                onChange={e => this.onSelectShareOpt(e.target.value, index, e)}
                                custom
                                size=''
                            >
                                {socialShareArr && socialShareArr.map((option, index) => (
                                    <option
                                        key={index}
                                        disabled={this.isIconDisabled(socialIcons, option.value)}
                                        value={option.value}
                                    >
                                        {option.label}
                                    </option>
                                ))}
                            </FormControl>
                        </div>
                        <Form.Group>
                            <Form.Label>Link Text</Form.Label>
                            <TextInput
                                value={activeIcon.linkText}
                                onChange={(e) => this.updateLinkText(e.target.value, index)}
                                wrapperClass="mx-10 mb-0"
                            />
                        </Form.Group>
                    </li>
                ))}
            </Fragment>
        );
    }

    // main function
    render() {
        const { data } = this.props;
        const dragulaDecoratorRef = (componentBackingInstance) => {
            if (componentBackingInstance) {
                this.socialContainers.push(componentBackingInstance)
            }
        };
        return (
            <Fragment>
                {data &&
                    <AppCard>
                        <Card.Body>
                            <div className="social-opt-container">
                                <ul id='social-container' ref={dragulaDecoratorRef}>
                                    {this.renderSocialIcons(dragulaDecoratorRef)}
                                </ul>
                            </div>
                        </Card.Body>
                    </AppCard>
                }
            </Fragment>
        )
    }
}

export { App }

类应用程序扩展了React.Component{
drake=null；
社会联系人=[]；
/**生命周期法*/
componentDidMount（）{
this.drake=Dragula（this.socialContainers{
iContainer:函数（el）{
return（el.id==“社交容器”）；
},
移动：函数（el、源、句柄、同级）{
返回（handle.id==“socialSortBtn”）；
},
接受：函数（el、目标、源、同级）{
返回（target.id=='social container'&&source.id=='social container'）；
},
});
this.drake.on（'drop'，（el，target，source，sibling）=>{
el.style.cursor=“抓取”；
设oldIndex=el.dataset.index
让type=el.dataset.type
让iconIndx=Array.prototype.indexOf.call（target.children，el）；
设targetIndex=iconIndx>0？iconIndx:0；
如果（类型）{
让内容={}
content.reOrder=true；
content.oldIndex=oldIndex；
this.props.callback（内容，'content'，targetIndex）
}
});
this.drake.on（'drag'，（el，source）=>{
el.style.cursor=“抓取”；
})
}
UpdateLink文本（val，索引）{
const{data，callback}=this.props；
让textParsedHtml=newdomparser（）.parseFromString（data.content[index].text，'text/html'）；
if（textParsedHtml.getElementsByTagName（“a”）[0]）{
textParsedHtml.getElementsByTagName（“a”）[0].innerHTML=val；
}
让内容={}
content.changeLinkTxt=true
content.linkText=val
content.linkTextHtml=textprassedhtml.body.innerHTML
//更新内容
回调（内容，'content'，索引）
}
onSelectShareOpt（selectedVal、SelectedDX、event）{
event.stopPropagation（）；
让socialObj=socialsharrar.find（（obj）=>obj.value==selectedVal）
if（socialObj）{
设htmlObj=this.getHTMLObj（socialObj）；
让内容={}
content.active_social_icons=socialObj
如果（htmlObj）{content.content=htmlObj}
//更新内容
this.props.callback（内容，'content'，selectedIndx）
}   
}
IsCondisabled=（数据，val）=>{
让发现=错误；
发现=数据。一些（功能（obj）{
如果（对象值===val）{
返回true；
}
返回false；
});
发现退货；
}
渲染社交（DragularDecorref）{
const{data}=this.props；
让socialIcons=data.activeIcons；
如果（！社会主义者）{
返回空
}
返回(
{socialIcons&&socialIcons.length>0&&socialIcons.map（（活动图标，索引）=>(

阻力指示器
this.onSelectShareOpt（e.target.value，index，e）}
习俗
大小=“”
>
{socialSharer&&socialSharer.map（（选项，索引）=>(
{option.label}
))}
链接文本
this.updateLinkText（e.target.value，index）}
wrapperClass=“mx-10 mb-0”
/>

))}
);
}
//主要功能
render（）{
const{data}=this.props；
常量dragulardecorref=（组件备份）=>{
if（组件备份状态）{
此.socialContainers.push（组件后退姿态）
}
};
返回(
{数据&&

{this.renderSocialIcons（dragulardecorref）}

}
)
}
}
导出{App}

我还尝试删除“”的innerHTML，然后返回新结构，但在本例中，它不返回html格式的任何内容。请检查此问题发生的原因