React-dnd: 중첩 된 DragSource에 대한 경고

에 만든 2016년 04월 06일 · 27코멘트 · 출처: react-dnd/react-dnd

DragSource이기도 한 컴포넌트 내부에 DragSource가있는 경우 (즉, 드래그 가능한 내부에서 드래그) 상위 컴포넌트를 드래그 할 때마다 다음 경고가 나타납니다.

Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.
warning @   modules.js?hash=107dc56…:19491
getInternalInstanceReadyForUpdate   @   modules.js?hash=107dc56…:5476
ReactUpdateQueue.enqueueSetState    @   modules.js?hash=107dc56…:5617
ReactComponent.setState @   modules.js?hash=107dc56…:15132
handleChange    @   modules.js?hash=107dc56…:20844
handleChange    @   modules.js?hash=107dc56…:22861
dispatch    @   modules.js?hash=107dc56…:23568
addSource   @   modules.js?hash=107dc56…:23124
registerSource  @   modules.js?hash=107dc56…:21172
receiveType @   modules.js?hash=107dc56…:21099
receiveProps    @   modules.js?hash=107dc56…:21089
DragSource(NestedComponent) @   modules.js?hash=107dc56…:21062
ReactCompositeComponentMixin.mountComponent @   modules.js?hash=107dc56…:6679
ReactCompositeComponent_mountComponent  @   modules.js?hash=107dc56…:896
ReactReconciler.mountComponent  @   modules.js?hash=107dc56…:5167
ReactMultiChild.Mixin.mountChildren @   modules.js?hash=107dc56…:13562
ReactDOMComponent.Mixin._createContentMarkup    @   modules.js?hash=107dc56…:10901
ReactDOMComponent.Mixin.mountComponent  @   modules.js?hash=107dc56…:10789
ReactReconciler.mountComponent  @   modules.js?hash=107dc56…:5167
ReactCompositeComponentMixin._updateRenderedComponent   @   modules.js?hash=107dc56…:7101
ReactCompositeComponentMixin._performComponentUpdate    @   modules.js?hash=107dc56…:7075
ReactCompositeComponentMixin.updateComponent    @   modules.js?hash=107dc56…:7004
ReactCompositeComponent_updateComponent @   modules.js?hash=107dc56…:896
ReactCompositeComponentMixin.receiveComponent   @   modules.js?hash=107dc56…:6936
ReactReconciler.receiveComponent    @   modules.js?hash=107dc56…:5217
ReactCompositeComponentMixin._updateRenderedComponent   @   modules.js?hash=107dc56…:7093
ReactCompositeComponentMixin._performComponentUpdate    @   modules.js?hash=107dc56…:7075
ReactCompositeComponentMixin.updateComponent    @   modules.js?hash=107dc56…:7004
ReactCompositeComponent_updateComponent @   modules.js?hash=107dc56…:896
ReactCompositeComponentMixin.receiveComponent   @   modules.js?hash=107dc56…:6936
ReactReconciler.receiveComponent    @   modules.js?hash=107dc56…:5217
ReactCompositeComponentMixin._updateRenderedComponent   @   modules.js?hash=107dc56…:7093
ReactCompositeComponentMixin._performComponentUpdate    @   modules.js?hash=107dc56…:7075
ReactCompositeComponentMixin.updateComponent    @   modules.js?hash=107dc56…:7004
ReactCompositeComponent_updateComponent @   modules.js?hash=107dc56…:896
ReactCompositeComponentMixin.performUpdateIfNecessary   @   modules.js?hash=107dc56…:6952
ReactReconciler.performUpdateIfNecessary    @   modules.js?hash=107dc56…:5232
runBatchedUpdates   @   modules.js?hash=107dc56…:5832
Mixin.perform   @   modules.js?hash=107dc56…:6304
Mixin.perform   @   modules.js?hash=107dc56…:6304
assign.perform  @   modules.js?hash=107dc56…:5789
flushBatchedUpdates @   modules.js?hash=107dc56…:5850
ReactUpdates_flushBatchedUpdates    @   modules.js?hash=107dc56…:896
Mixin.closeAll  @   modules.js?hash=107dc56…:6370
Mixin.perform   @   modules.js?hash=107dc56…:6317
ReactDefaultBatchingStrategy.batchedUpdates @   modules.js?hash=107dc56…:10295
enqueueUpdate   @   modules.js?hash=107dc56…:5879
enqueueUpdate   @   modules.js?hash=107dc56…:5460
ReactUpdateQueue.enqueueSetState    @   modules.js?hash=107dc56…:5626
ReactComponent.setState @   modules.js?hash=107dc56…:15132
handleChange    @   modules.js?hash=107dc56…:21121
handleChange    @   modules.js?hash=107dc56…:22861
dispatch    @   modules.js?hash=107dc56…:23568
(anonymous function)    @   modules.js?hash=107dc56…:22100
endDragIfSourceWasRemovedFromDOM    @   modules.js?hash=107dc56…:29563
handleTopDrop   @   modules.js?hash=107dc56…:29860

이에 대한 예는 다음과 같습니다.

class ParentDraggable extends React.Component {
    render() {
        return this.props.connectDragSource(
            <NestedDraggable/>
        );
    }
}

//... Skip the code for containers

class NestedDraggable extends React.Component {
    render() {
        return this.props.connectDragSource(
            <div></div>
        );
    }
}

이 문제는 부모 구성 요소를 다시 렌더링하면 receiveProps 함수 호출 중에 자식 DragSource 호출이 setState를 호출한다는 사실에서 비롯된 것이라고 생각합니다.

triage wontfix

출처

jchristman

👍17

가장 유용한 댓글

누군가에게 도움이되는 경우를 대비하여 : 사용자 정의 드래그 레이어에서 드래그 소스 인 구성 요소를 렌더링 할 때 편리했기 때문에이 문제가 발생했습니다. 드래그 소스 컴포넌트를 드래그하려고했던 엔티티와 동일했기 때문에 코드를 재사용하여 "DRY"를 유지하는 것이 합리적이었습니다. 나는 그것이 모든 dragSource 코드를 가지고 있다는 사실에 대해 생각하지 않았다. 되돌아 보면, _ 물론 _ 드래그 소스가 커스텀 드래그 레이어에서 렌더링되는 것을 원하지 않을 것이다.

궁극적으로 구성 요소를 기본 구성 요소를 감싸는 "Draggable"버전으로 분할 한 다음 사용자 지정 드래그 레이어에서 기본 구성 요소를 사용했습니다. 더 이상 경고없이 더 나은 코드! 👍

davidjoy 에 2017년 07월 23일

👍6 🎉4 ❤2

모든 27 댓글

: +1 :

nihtalak 에 2016년 04월 07일

문제를 재현하는 프로젝트를 제공해 주시겠습니까?

gaearon 에 2016년 04월 09일

저는 간단한 예제를 만들려고 노력하고 있으며 제가 작업중인 개인 프로젝트 외부에서 재생산하는 데 문제가 있습니다. @nihtalak , 문제를 생성하는 Github에 저장소가 있습니까?

jchristman 에 2016년 04월 09일

다음은 설명 된 동작을 보여주는 작은 저장소입니다. https://github.com/ebakan/react-dnd-nested-bug

ebakan 에 2016년 04월 10일

흥미롭게도 Component 는 monitor.getItem() 수신 할 때만이 오류를 발생시킵니다. monitor.isDragging() 수신하는 경우 https://github.com/ebakan/react-dnd-nested-bug/tree/no-error-with-is- 브랜치에 표시된대로 제대로 작동합니다.

ebakan 에 2016년 04월 10일

monitor.getItemType() 청취 할 때도 오류가 발생합니다. https://github.com/ebakan/react-dnd-nested-bug/tree/error-with-get-item-type

ebakan 에 2016년 04월 10일

@ebakan- 흥미 롭습니다. isDragging을 사용하는 내 코드에이 버그가 나타나는 원인이 무엇인지 궁금합니다. 중첩 된 드래그 가능 항목을 사용하여 이상한 일을하고 있으므로보고있는 것과 동일한 버그가 나타날 수 있습니다. 재현 해주셔서 감사합니다!

jchristman 에 2016년 04월 10일

나는 중첩 드래그 가능 항목도 있지만 그게 문제인지 확실하지 않습니다.
새 상점과 듣고있는 코드를 만드는 것 같습니다. 도움이된다면 동영상을 만들었습니다.
http://screencast.com/t/qCrJRPAS2MYR

업데이트 : 문제를 발견하고 남은 청취자가 있었으므로 제 경우에는 react-dnd 때문이 아닙니다.
Update2 : 너무 빨리 말 했어요. 남은 청취자를 제거해도 여전히 경고가 표시됩니다.

hakunin 에 2016년 04월 11일

방금 Dnd를 다른 구성 요소에 추가했으며 중첩되거나 여러 드래그 구성 요소가 없어도이 문제를 발견했습니다.

약간의 파고를 한 후 문제가 드래그되는 동안 구성 요소를 렌더링하는 사용자 정의 드래그 레이어와 연결되어 있음을 발견했습니다.

드래그되는 구성 요소 대신 텍스트를 넣으면 제대로 작동합니다. 구성 요소 자체가 드래그 소스입니다.

hakunin 에 2016년 05월 23일

@jchristman @hakunin 중첩 된 드래그 가능 항목이 없지만 isDragging 기반으로 조건부로 렌더링 된 드롭 대상이있을 때 Cannot update during an existing state transition 발생했습니다. 귀하의 예에서 이것이 해당 될 수 있습니까? 다음과 같은 것 :

render() {
    var dropZone;
    if (this.props.isDragging) dropZone = <MyDropTarget />;
    return <div>
       <MyDragSource />
       {dropZone}
    </div>
}

드래그가 활성화되었을 때 구성 요소를 추가하고 제거하는 대신 display: none/block 를 사용하여 대상을 숨기는 방식으로 작업을 끝냈습니다.

brianreavis 에 2016년 06월 21일

👍8

그게 문제 가 될

jchristman 에 2016년 06월 21일

Naw- "드롭"이 발생하면 문제가 발생합니다. 그런 다음 구성 요소를 다시 렌더링하려고 시도하고이 경고를 표시합니다.

jchristman 에 2016년 06월 22일

👍2

내 드래그 미리보기가 DragSource (내가해서는 안되는) 인 구성 요소 일 때 동일한 경고를 받았습니다.

arjunu 에 2016년 07월 28일

👍2

@jchristman 당신은 이것에 대한 해결책을 생각해

중첩 된 dragSources로 작업하고 중첩 된 리소스를 삭제할 때 갑자기이 오류가 표시되기 시작했습니다.

예제를 제공 할 수 있지만 누군가 문제를 해결했는지 또는 적절한 해결 방법이 있는지 확인하고 싶었습니다.

gharwood1 에 2016년 08월 16일

내 드래그 미리보기가 DragSource (내가해서는 안되는) 인 구성 요소 일 때 동일한 경고를 받았습니다.

감사합니다 @arjunu 내 경고는 이것으로 인해 발생했습니다!
나는 아직도 이것들을 가끔 가지고 있으므로 다른 이유도 고쳐야 할 것 같습니다. 내 편이 될 수 있습니다 :)

hakunin 에 2016년 08월 16일

👍1

@ gharwood1 , 문제가 해결 될 때까지 문제를 해결하고 있습니다. 이 라이브러리를 실제로 이해하기 위해 몇 시간을 보냈으므로 수정을 요청할 수 있었지만 꽤 복잡해서 계속 진행했습니다. 시간이 없어 ... :-(

jchristman 에 2016년 08월 25일

😄1 👍1

@gaearon 나는 누군가가 당길 수있는 프로젝트를 만들지는 않았지만 필요한 경우 만들 수 있다고 생각합니다.

기본적으로 내가 여기서하려는 것은 유효합니다.

https://github.com/arackaf/booklist/blob/react-dnd-bug-freeze/react-redux/modules/subjects/components/subjectsList-es6.js

64 행에서 조건부를 비활성화하면 모든 것이 정상입니다

if (this.props.draggingSubject){
    effectiveChildren.push(this.props.draggingSubject);
}

그러나 드래그 이벤트의 결과가 소품을 수정하고 구성 요소를 렌더링하기 시작하는 순간 위의 경고가 자주 발생하기 시작합니다.

이러면 안되나요?

사용 사례는 기본적으로 드롭 대상에서 현재 드래그 된 항목을 "미리보기"하는 것입니다. 위의 내용은 개념 증명입니다. 아직 Redux 스토어에 연결되어 있지 않습니다. 이것이 유효한지 확실하지 않기 때문입니다.

흠, 변경 사항을 SubjectDisplayContent 로컬로 유지해도 괜찮은 것 같지만 변경 사항이 SubjectDisplay 까지 확장되면 경고가 발생하기 시작합니다. 따라서 기본적으로 dropTarget이 다른 dropTarget을 수정하는 props를 보내면 react-dnd가 짜증을냅니다. 이것이 예상되는 것입니까, 그리고 몇 가지를 다시 생각해야합니까, 아니면 dnd의 버그입니까?

arackaf 에 2016년 11월 22일

👍1

똑같은 문제가 발생합니다. 일부 상황에서 할 수있는 것은 각 중첩 된 드래그 가능 항목 주위에 DragDropContext 만드는 것입니다. 그러나 이것은 사용자 정의 DragLayer를 원하는 즉시 작동하지 않습니다.

Robinfr 에 2017년 02월 09일

👍1

중첩 된 dropTargets를 수행하는 것을 제외하고는 동일한 오류가 발생합니다.
설명서를 둘러 본 후

isOver (옵션) : 드래그 작업이 진행 중이고 포인터가 현재 소유자 위에 있으면 true를 반환합니다. 선택적으로 {shallow : true}를 전달하여 중첩 된 대상이 아니라 소유자 만 호버링되는지 여부를 엄격하게 확인할 수 있습니다.

(shallow is true 옵션 사용) 부모 dropTarget의 canDrop 함수에서 문제가 해결되었습니다. 다른 시나리오에도 동일하게 적용될 수 있다고 생각합니다.

jchenjc 에 2017년 02월 12일

@jchenjc 나는 이것을 시도했지만 나를 위해 작동하지 않았습니다. 솔직히 말해서 내 상황은 중첩 된 드래그 미리보기 + 드래그 소스 + 목록에서 작업해야하는 드롭 대상으로 매우 복잡합니다.

Robinfr 에 2017년 02월 13일

FWIW : 중첩 된 드래그 소스와 사용자 정의 드래그 레이어가 있습니다. 사용자 정의 드래그 레이어를 제거하면 메시지가 사라집니다. 스택 추적을 검사하면 문제가 여기에있는 것처럼 보입니다.

printWarning    @   warning.js?8a56:36
warning @   warning.js?8a56:60
getInternalInstanceReadyForUpdate   @   ReactUpdateQueue.js?6531:54
enqueueSetState @   ReactUpdateQueue.js?6531:200
ReactComponent.setState @   ReactComponent.js?702a:63
handleChange    @   DragLayer.js?1cbc:124 <--------------
handleChange    @   DragDropMonitor.js?0588:60

관련 코드는 여기에 있습니다 . 다시 렌더링을 트리거하기 위해 내 경우 상태가 다른 이유를 살펴 보겠습니다.

AndrewSouthpaw 에 2017년 03월 06일

👍1

dragsource + droptarget이 droptarget 안에 중첩되어 있으면이 문제가 발생합니다.

nottoseethesun 에 2017년 03월 21일

👍4

이러한 일이 발생한 이유 중 하나는 목록 구성 요소를 드래그 호버 위치에 따라 수행 할 작업을 결정하는 단일 드롭 대상으로 만드는 대신 개 어론이 모든 목록 항목을 드롭 대상으로 만들어 목록 드래그 앤 드롭을 부러워했기 때문입니다. 후자의 방법은 내가 본 대부분의 다른 DnD 시스템이 작업을 수행하는 방법입니다.

jedwards1211 에 2017년 04월 10일

davidjoy 에 2017년 07월 23일

👍6 🎉4 ❤2

@davidjoy woah, 공유해 주셔서 감사합니다! 저도 똑같은 일을하고 있습니다. 시도해 볼 필요가 있습니다!

hakunin 에 2017년 07월 24일

@davidjoy 방금 내

hakunin 에 2017년 07월 28일

🎉1

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

stale[bot] 에 2019년 07월 06일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React-dnd: 중첩 된 DragSource에 대한 경고

가장 유용한 댓글

모든 27 댓글

관련 문제