Question

我在React中有2个DOM异常：无法在“节点”上执行“ removeChild”：要删除的节点不是该节点的子节点和无法在“节点”上执行“ insertBefore”：要在其之前插入新节点的节点不是该节点的子节点。

我试图在React中拖放一个下拉菜单。它包含学生列表，名称搜索框和房间列表。我有条件地根据状态中存储的列表使用学生姓名来渲染拖动组件。在我将一个学生拖到一个房间并按名称搜索另一个后，我得到了 Dom Exception无法执行'removeChild'。我试图将拖动的学生保存到另一个列表中，并且也将其呈现出来，并且可以正常工作，但是在某些情况下，我得到了Dom Exception Failed to execute'insertBefore'on'Node'：当我按以下顺序拖放学生时：第一学生，第二，第三等没问题，但是当我按另一顺序执行学生时：第三学生，第一学生等，那没问题：（

SearchField:
<div>
  <SearchField
     placeholder="Search student..."
     onEnter={(ev)=>{
     this.setState({search: ev.toString()}}
   />
</div>

Conditional drag component render:
<div id = "studentList" style={droppableStyle}>
   {
      this.state.studentList.map((item) => 
            this.state.anotherList.includes(item) ?
              <DragComponent id={item.ID_Student.toString()} student={item}/>
            :
                this.state.search === '' ?
                   <DragComponent id={item.ID_Student.toString()} student={item}/>
                :
           item.Name.toLowerCase().includes(this.state.search.toLowerCase()) ?
           <DragComponent id={item.ID_Student.toString()} student={item} />
           : null
   )}
</div>

当我把学生放到一个房间里时，我只是简单地使用event.dataTransfer.getData（'transfer'）并将孩子添加到房间里。

DomException：无法在“节点”上执行“ insertBefore”

0 个答案: