React-dnd: Предупреждение с вложенным DragSource

: +1:

Не могли бы вы представить проект, воспроизводящий проблему?

Я пытаюсь привести простой пример, и у меня возникают проблемы с воспроизведением вне моего частного проекта, над которым я работаю. @nihtalak , у вас есть репо на Github, в котором возникает проблема?

Вот крошечное репо, демонстрирующее описанное поведение: https://github.com/ebakan/react-dnd-nested-bug

Любопытно, что Component выдает эту ошибку только при прослушивании monitor.getItem() . Если он прослушивает monitor.isDragging() он будет работать правильно, как показано в этой ветке: https://github.com/ebakan/react-dnd-nested-bug/tree/no-error-with-is- перетаскивание

Он также выдаст ошибку при прослушивании monitor.getItemType() : https://github.com/ebakan/react-dnd-nested-bug/tree/error-with-get-item-type

@ebakan - интересно. Мне интересно, что вызывает появление этой ошибки в моем коде, который использует isDragging. Я делаю некоторые странные вещи с вложенным перетаскиваемым элементом, поэтому это может быть проявлением той же ошибки, которую вы видите. Спасибо за помощь в воспроизведении!

У меня тоже есть вложенные перетаскиваемые объекты, но я не уверен, что это проблема.
Кажется, создается новый магазин и код, который слушает. Я сделал видео, если это поможет:
http://screencast.com/t/qCrJRPAS2MYR

Обновление: обнаружил проблему, у меня был оставшийся слушатель, поэтому в моем случае это было не из-за response-dnd.
Update2: я заговорил слишком рано. После удаления оставшегося слушателя я все равно получаю предупреждение.

Я просто добавил Dnd к другому компоненту и заметил эту проблему даже без вложенных или нескольких перетаскиваемых компонентов.

Немного покопавшись, я обнаружил, что проблема связана с настраиваемым слоем перетаскивания, отображающим компонент при перетаскивании.

Если я помещаю текст вместо перетаскиваемого компонента, он работает нормально. Сам компонент является источником перетаскивания.

@jchristman @hakunin У меня нет вложенных перетаскиваемых файлов, но я столкнулся с Cannot update during an existing state transition когда у меня была цель перетаскивания, условно отображаемая на основе isDragging . Может ли это иметь место в любом из ваших примеров? Что-то вроде этого:

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

Закончил работу над этим, используя display: none/block чтобы скрыть цель вместо добавления и удаления компонента при активном перетаскивании.

Я думаю , что может быть проблемой. Я проверю и дам вам знать. Это определенно та конструкция, которую я использую сейчас.

Нет - у меня проблема, когда происходит "падение". Затем он пытается повторно визуализировать компонент и выдает это предупреждение.

Получил такое же предупреждение, когда мой предварительный просмотр перетаскивания был компонентом, который был DragSource (чего я не должен делать).

@jchristman Вы когда-нибудь придумывали решение этой проблемы?

Я работаю с вложенными источниками перетаскивания и внезапно начал видеть эту ошибку при удалении вложенного ресурса.

Я могу привести пример, но хотел узнать, решил ли кто-нибудь проблему или нашел подходящее решение.

Получил такое же предупреждение, когда мой предварительный просмотр перетаскивания был компонентом, который был DragSource (чего я не должен делать).

Спасибо @arjunu, мое предупреждение было вызвано этим!
Иногда они все еще возникают, поэтому я думаю, что есть еще одна причина, по которой нужно исправить. Может быть, с моей стороны :)

@ gharwood1 , я просто живу с проблемой, пока ее не

@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, response-dnd раздражается. Ожидается ли это, и мне нужно кое-что переосмыслить, или это ошибка dnd?

У меня точно такая же проблема. В некоторых случаях вы можете создать DragDropContext вокруг каждого вложенного перетаскиваемого объекта. Но это не сработает, если вам понадобится настраиваемый DragLayer ..

У меня та же ошибка, за исключением того, что я делаю вложенные dropTargets.
Осмотрев документацию, я попытался использовать

isOver (options): возвращает true, если выполняется операция перетаскивания, и указатель в настоящее время находится над владельцем. Вы можете при желании передать {shallow: true}, чтобы строго проверять, зависает ли только владелец, а не вложенная цель.

(с опцией shallow is true) в функции canDrop родительского dropTarget, и проблема исчезла. Я думаю, что то же самое можно применить и к другим сценариям.

@jchenjc Я пробовал это, но у меня это не сработало. Честно говоря, моя ситуация чрезвычайно сложна с вложенным предварительным просмотром перетаскивания + источником перетаскивания + целью перетаскивания, которые должны работать со списками.

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

Соответствующий код здесь . Я собираюсь выяснить, почему в моем случае состояние может быть другим, чтобы вызвать повторную визуализацию ...

Я получаю эту проблему с помощью dragsource + droptarget, вложенного в droptarget.

Частично это произошло потому, что gaearon предусмотрел перетаскивание списка, сделав каждый элемент списка целью перетаскивания, а не превращая компонент списка в единственную цель перетаскивания, которая определяет, что делать, на основе положения перетаскивания. Второй способ - это то, как работает большинство других систем DnD, которые я видел.

На всякий случай это кому-то поможет: я столкнулся с этим, когда визуализировал компонент, который был источником перетаскивания в моем настраиваемом слое перетаскивания, потому что это было удобно. Я использовал компонент источника перетаскивания, потому что это была та же самая сущность, которую я пытался перетащить, поэтому для меня было логичным сохранить код «СУХИМ», повторно используя его. Я не думал о том, что в нем был весь код dragSource - оглядываясь назад, _ конечно_, я бы не хотел, чтобы источник перетаскивания КАК вещь отображалась в настраиваемом слое перетаскивания.

В конечном итоге я разделил свой компонент на «перетаскиваемую» версию, которая обернула базовый компонент, а затем использовал базовый компонент в моем настраиваемом слое перетаскивания. Больше никаких предупреждений, лучший код! 👍

@davidjoy woah, спасибо, что поделились! Я делаю то же самое, нужно попробовать!

@davidjoy Я тоже починил. Ваше предложение указывает на то, что не следует использовать DragSource и тому подобное для настраиваемого слоя. Я просто использовал голый компонент без DragSource в моем настраиваемом слое перетаскивания, и это помогло.

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.