React-dnd: "드롭 후 호버를 호출 할 수 없음"을 디버깅하는 방법은 무엇입니까?

그래서 JS 문제를 조사한 결과이 오류가 발생하기 전에 드롭이 발생할 때 사용자 정의 콜백에서 오류가 발생하여 모니터 / 스토어의 상태가 손상 될 수 있음을 발견했습니다.

이 문제도 발생하고 있습니다. 제 상황은 React 구성 요소가 드롭 대상이자 드래그 소스 인 것과 같습니다. 두 개의 구성 요소가있을 때 위의 오류가 발생하기 전에 한 번 끌어서 놓을 수 있습니다. 세 개 있으면 오류없이 작동합니다. 단일 구성 요소의 여러 컨텍스트와 관련이 있다고 가정합니까?

이 문제가 발생하여 지난 밤 특정 사용 사례에 대한 해결 방법을 찾았습니다.

컨텍스트를 위해 DragSources 목록을 렌더링하고 있었고 DropTarget에 드롭 된 항목이 있으면 DragSources 목록에서 제거되고 DropTarget은 DragSource의 콘텐츠를 렌더링하는 구성 요소로 대체됩니다.

이 끌어서 놓기 기능 (항목에 '범주'를 일치시키는 구성 요소)의 필수 부분은 항목을 DragSource 목록에 다시 추가하는 기능으로, 배치 된 항목을 DragSource로 바꾸고 DragSources에 다시 추가하기 만하면됩니다. 명부.

이제이 예외는 모든 범주에 항목을 배치하고 적어도 하나를 제거 할 때만 발생했습니다 (목록이 가득 차지 않았고 하나를 제거하고 다시 추가 할 때가 아님). 그래서 저는 DragSources 목록에 이것이 발생하는 자식이 전혀 없을 수 없다는 결론에 도달했습니다 (아마도 컨테이너 요소가 사라지기 때문에 이것을 테스트 할 시간이 충분하지 않았기 때문일 수 있습니다). 이를 완화하기 위해 배치시 DragSources 목록에서 항목을 제거하는 대신 해당 스타일을 display: none

설명하기 어렵지만 도움이 되었기를 바랍니다.

@PendragonDevelopment와 동일한 효과를 경험하고 있습니다. 내 목록은 하나의 항목으로 시작하여 두 번째 항목을 추가 한 다음 다시 정렬 할 수 있습니다. Javascript 오류가 표시되기 전에 두 항목을 한 번만 재정렬 할 수 있으며 다시 정렬 할 수 없습니다.

나도이 문제가있다
이유는 모르겠지만 첫 번째 재배치 후 이러한 오류가 표시됩니다.

여기에도 같은 오류가 있습니다.

데모 예제와 내 것을 비교 한 후 구성 요소를 루프 할 때 배열 키를 사용하여 구성 요소를 키 와 인덱스 모두 설정하고 데모에서는 Sortable / Simple / Container.js 인덱스 만 설정하고 키 가 고정되어 있음을 발견했습니다.

해냈고 일했습니다!

키는 고정 값이어야합니다. 그렇지 않으면 구성 요소에 대한 참조가 배열 재정렬 후 느슨해집니다.

동적으로 구성 요소를 만들고 DnD를 연결하는 경우 일부 라이브러리를 사용해야합니다. 그렇지 않으면 Date.now() 에서 각 구성 요소에 대한 고유 키를 생성하기 위해이를 수행합니다.

{this.state.rows.map(function(row, key) {
  return (<RowComponent key={row.id} index={key} id={row.id} moveRow={that.moveRow} />);
})}

row.id 는 각 구성 요소에 대해 고유합니다.

왜 작동하는지 이해하지 못하지만 node-uuid's v4 생성 한 임의의 키 대신 model.id를 사용하여 문제를 해결했습니다. 적어도 더 이상 오류가 발생하지 않습니다.

키를 수정해도 문제가 해결되지 않았습니다.
이것은 내 코드였습니다.

           <ContentPatch>
             {tasks.loading 
              ? <div>...loading </div>
              : this.state.containers.map((item, i) => {
                  return (
                    <TaskStage
                      key={item.id}
                      item={item}
                      tasklist={tasks.tasks}
                      onDropped={this.handleDropped}
                      onBeginningDrag={this.onBeginningDrag}
                    />
                  );
                })}
          </ContentPatch>

모든 드롭 된 작업 후 모든 항목을 매핑하고 동일한 오류가 발생했습니다.
그리고 나는 내 상태를

...
{tasks.loading && tasks.tasks.length===0
 ? <div>...loading </div>
...

그리고 해결되었습니다. 다시 한 번 마운팅이이 오류의 원인이라고 생각합니다.

이 같은 오류가 발생했습니다.

내 사용 사례는 다음과 같습니다.

• 동일한 DragSource 및 DragTarget 구성 요소
• 드롭시 경로를 탐색하고 싶었습니다.

밝혀 endDrag ( DragSource 후 법) 화재 drop ( DropTarget 방법). 나는 모니터의 상태를 깨뜨리는 drop 내에서 경로 탐색을 처리하고있었습니다.

해당 논리를 endDrag 하여 수정했습니다. 리팩토링에는 monitor.didDrop() 드롭이 완료되었는지 확인하는 것이 포함되었지만 그렇게 나쁘지는 않았습니다.

나도이 문제가있다. 제 경우는 구성 요소가 드롭 대상이자 드래그 소스 인 것과 같습니다. endDrag 메서드를 사용하려고 시도했고 패치 된 백엔드 (https://gist.github.com/nickpresta/eb5cce69d650db4c2795)를 사용하려고했습니다. 이 문제는 해결되지 않았습니다.

내 구성 요소 :

@DropTarget<HeadColOwnProps>(TaskDndTypes.headCol, headColTargetSpec, headColTargetCollector)
@DragSource<HeadColOwnProps>(TaskDndTypes.headCol, headColSourceSpec, headColSourceCollector)
class HeadColComponent extends React.Component<any, void> {
    render() {
        const props = this.props;
        return this.props.dndConnectDropTarget(
            this.props.dndConnectDragPreview(
                <div>
                    <div className={block('panels-task__drag')({start: props.dndIsDragging})}>
                        <SortingIcon
                            label={props.label}
                            arrowIsVisible={props.sortingIsPossible}
                            direction={props.sortingDirection}
                            clickHandler={props.sortingHandler}
                        />
                        {this.props.dndConnectDragSource(
                            <span className="panels-task__drag-control">
                                <SVGIcon width={10} height={10} url={'#icon-drag-and-drop-cell'} />
                            </span>
                        )}
                    </div>
                </div>
            )
        );
    }
}

사용 예 :

const renderHeadCellId = (): JSX.Element => {
        return (
            <TaskCellHead key="key-head-col-id" modifications={{ number: true }}>
                <HeadColComponent
                    label="#"
                    key="key-dnd-head-col-id"
                    taskColType={TaskCols.id}
                    sortingIsPossible={false}
                    taskColsOrder={taskStore.orderCols}
                    updateDragProcess={(dp: TaskColDragProcess | null) => taskStore.updateDragProcess(dp)}
                    updateOrderCols={(order: TaskCols[]) => taskStore.updateOrderCols(order)}
                    dragProcess={taskStore.dragProcess}
                />
            </TaskCellHead>
        );
    };

데코레이터 설정 :

const headColSourceSpec: DragSourceSpec<HeadColOwnProps> = {
    beginDrag(props: HeadColOwnProps): DraggedItem {
        return { sourceColType: props.taskColType };
    },
    canDrag(props: HeadColOwnProps): boolean {
        return props.taskColsOrder.length > 1;
    },
    endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }
};

const headColTargetSpec: DropTargetSpec<HeadColOwnProps> = {
    drop(props: HeadColOwnProps, monitor: DropTargetMonitor): DroppedResult {
        console.debug('drop');
        return {
            newOrderCols: getNewOrder((monitor.getItem() as DraggedItem).sourceColType, props.taskColsOrder, props.dragProcess)
        };
    },
    hover(props: HeadColOwnProps, monitor: DropTargetMonitor, component: HeadColComponent): Object | void {
        if (!monitor.canDrop()) {
            return;
        }
        // ...
        props.updateDragProcess(currentDragProcess);
    },
    canDrop(props: HeadColOwnProps, monitor: DropTargetMonitor): boolean {
        return props.taskColType !== (monitor.getItem() as DraggedItem).sourceColType;
    }
};

const headColSourceCollector = (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    dndConnectDragSource: connect.dragSource(),
    dndConnectDragPreview: connect.dragPreview(),
    dndIsDragging: monitor.isDragging()
});

const headColTargetCollector = (connect: DropTargetConnector, monitor: DropTargetMonitor) => {
    return {
        dndConnectDropTarget: connect.dropTarget(),
        dndIsOverCurrent: monitor.isOver({ shallow: true })
    };
};

재정렬 후 endDrag 는 호출되지 않지만 drop 는 호출됩니다. 다음 행은 실행되지 않습니다.

endDrag(props: HeadColOwnProps, monitor: DragSourceMonitor): void {
        console.debug('endDrag');
        if (!monitor.didDrop()) {
            return;
        }
        console.debug('endDrag finish');
        props.updateOrderCols((monitor.getDropResult() as DroppedResult).newOrderCols);
    }

내가 도대체 ​​뭘 잘못하고있는 겁니까? 어떤 아이디어?

HTML5Backend를 Touch Backend로 교체했습니다 (https://github.com/yahoo/react-dnd-touch-backend). 그것은 나를 위해 작동합니다.

저에게는 드롭시 콜백에 중단 점이 설정되어 있기 때문에이 오류가 발생했습니다. 흥미로운 점은 모든 중단 점이 계속되고 브라우저가 일시 중지되지 않은 후에도 실패한다는 것입니다. 중단 점을 제거하자마자 자리를 비울 때 오류가 발생합니다.

나는 같은 문제가 있습니다. 이 패키지를 react-dnd-touch-backend로 대체했지만 실제로 문제 해결에 도움이되지는 않습니다. 차라리 html5를 실행하고 싶습니다. 반복기에 의해 인쇄되는 모든 요소에 키 설정을 시도했습니다.

같은 오류가 발생했습니다. 나는 모든 렌더에서 드래그 가능한 구성 요소에 HOC를 다시 적용하고 있었기 때문에 항상 다르기 때문에 react-dnd를 혼동했습니다.

@hakunin이이 문제를 해결

그 이후로 내가 가지고있는 모든 DnD 코드를 리팩토링했고 드래그를 시작할 때 여전히 그것을 얻습니다. 이제 모든 코드를 단일 util 파일로 옮기고 구성 가능하게 만들었으므로 마침내 어떤 시점에서 발생하는 이유를 찾을 수있을 것입니다. 내가 할 때 여기에 그것에 대해 게시합니다. (마우스 설정 btw에서 TouchBackend를 사용하고 있습니다)

응답 해 주셔서 감사합니다. 드래그하는 동안 다른 오류가 발생한 후에 만이 오류가 발생합니다. 당신도 마찬가지입니까?

내가 끌기 시작할 때마다 내 불평이 있습니다.

내 경우에는 endDrag (props, monitor, component)의 구성 요소가 항목이 삭제 된 후 정의되지 않은 것입니다. 그래서 내 원래 오류가 발생하여 "Cannot call hover after drop"메시지의 콘솔 스트림이 발생했습니다.

이 댓글 덕분에이 문제를 해결할 수있었습니다 : https://github.com/react-dnd/react-dnd/issues/431#issuecomment -317219509

나는 전에 다른 잡히지 않은 오류를 일으켰을 때 이것을 만났습니다. 다른 오류가 없었을 때이 오류가 없습니다.

제 경우에는 endDrag에서 오류를 일으키는 일부 작업 / 기능을 호출 할 때 발생했습니다. 그래서 기본적으로 잡히지 않은 오류가 dnd를 멈췄습니다. endDrag 블록에서 일부 함수 / 작업을 호출 할 때 try catch를 사용할 수 있습니다.
endDrag: (props, monitor) => { try { handleEndDrag(); } catch(errror) { console.error(error)} }

onDrop 함수 내부의 디버거 문도 오류의 원인이었습니다. 그것을 제거하면 오류가 사라지지만 그것 없이는 디버깅하는 데 어려움이 있습니다.

디버거가이 오류를 발생시키는 이유를 아십니까?

관심이 있는지 확실하지 않지만 Electron 앱을 실행 중입니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상 활동이 발생하지 않으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.