React-dnd: Неперехваченная ошибка: неизменное нарушение: ожидается обнаружение допустимой цели.

Вы можете поделиться своим кодом?

Да, пожалуйста, разместите где-нибудь работающий код.
Это также поможет многим из вас, если вы могли бы использовать версию в NPM, чтобы было легче отладить проблему.

Я обнаружил ошибку при настройке примера для вас, ребята. Объект, который я вернул в beginDrag , не содержал идентификатора. Вероятно, у React была проблема с этим, которая могла вызвать эту ошибку в React-Dnd.

Интересно, спасибо! На самом деле мы не налагаем никаких ограничений на то, что возвращает beginDrag() если это простой объект, поэтому мне интересно, каков был поток ошибок.

Извините за добавление в старую ветку, но поскольку это единственная ссылка на эту ошибку во всем Интернете, я подумал, что в будущем кто-то может найти следующее полезное.

У меня была такая же ошибка, но проблема заключалась в том, что у меня был компонент (похожий на Card в примерах), который был украшен обеими_ оболочками перетаскивания.

Когда simulateBeginDrag началось, он отправил _drop target_ (вместо источника перетаскивания) валидатору, что правильно не удалось. Решение заключалось в том, чтобы получить идентификатор обработчика на один уровень глубже (с getDecoratedComponentInstance() ).

@yannisbarlas отличная находка. Я столкнулся с той же самой проблемой. Может быть, об этом можно упомянуть в документации по

@yannisbarlas Спасибо за находку! Мне очень помогли тонны разочарования :)

На всякий случай, если кто-то наткнется на эту ошибку и проблему, у меня была аналогичная проблема при составлении сортируемого списка и каждого элемента, имеющего ключ, состоящий из конкатенации его идентификатора и его индекса в списке.
Исправление было просто сделано путем установки правильного (то есть последовательного) ключа для перетаскиваемого элемента.

@yannisbarlas У вас есть пример кода вашего решения?

Извините за поздний ответ @damiangreen , письмо с уведомлением пролетело мимо меня.

Код устарел (это было давно), но вы можете проверить его здесь .

Если кто-то все еще сталкивается с этой проблемой, обратите внимание, что элемент списка, который вы сопоставляете, должен иметь постоянную ключевую опору. В моем случае я отправлял действие Redux для изменения элементов в списке, а затем предоставлял ключ для сопоставленного элемента следующим образом:

blocks.map((block, idx) => {
  <React.Fragment key={`${block.name}_${idx}`}>
    ...
  <React.Fragment />
})

что, по-видимому, вызывает ошибку, потому что idx меняется на лету.

спасибо @chulanovskyi
для меня это выглядело так:
JSX arr.map((item, idx) => ( <Item item={item} // key={`${idx}_${item.id}`} // this was busted because idx key={item.key} // when adding this to the array elsewhere i use a count for uniqueness index={idx} > </Item> ))

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

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

Привет, @DominicTobias
У меня также есть динамически созданные области перетаскивания.
Как ты это починил?

@ raymond-ong

У меня также есть динамически созданные области перетаскивания.
Как ты это починил?

Другими словами, проблема может заключаться в том, что вы снова создали родительский (верхний уровень) компонент.
В этом случае response-dnd потерял идентификатор (его внутренний идентификатор), с которым он работал, и выдает ошибку.

В моем случае это было то, что я обновил параметр id родительского объекта при обновлении состояния в редукторе (перемещать столбцы внутри строки и обновлять идентификатор строки, когда столбцы меняют свои места). После удаления updating id functionality все начинает работать правильно.

У меня тоже есть такая проблема. В моем случае это происходит только тогда, когда цель drop возвращает false на canDrop. Кто-нибудь может выложить ваше решение этой проблемы? Кто-то упомянул, что это связано с отсутствующим идентификатором, но я не уверен, куда его поместить?

У меня та же проблема, мне удалось настроить пример из документации, вы можете увидеть это здесь, перетащив первый элемент: https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Container.jsx

Я также создал проблему со всеми подробностями (может, мне следовало просто опубликовать здесь?) # 2693

У меня была такая же проблема, и я исправил ее так:

мой код выглядел как

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])

    const CardComponent = ({ card, index }) => {
       return (/**/)
    }
    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

оказывается, вы не можете поместить CardComponent внутрь ParentOfCards (я думаю, это связано с повторным рендерингом), поэтому я решил, что он отделяет CardComponent от ParentOfCards scope:

const ParentOfCards = () => {    

     const [ cards, setCards ] = useState([ ... ])


    return (
        <div>
            { cards.map( CardComponent ) }
        </div>
    )

}

const CardComponent = ({ card, index }) => {
       return (/**/)
}

И вот (после двух дней отладки: c) работает! 😁

@marcelomrtnz Большое спасибо
Вы сэкономили мне много времени на этом вопросе на мобильном телефоне

Я столкнулся с той же проблемой при перетаскивании на мобильном телефоне с помощью response dnd lib, но после удаления div столбцов строк из списка и сохранения только списка карт он работал у меня без этой ошибки. Он получил эту действительную цель в мобильном браузере

Я получил эту идею из вашего сообщения, так что спасибо @marcelomrtnz

У меня такая же проблема. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Вот песочница. перетащите элемент 1ba на элемент 1, а затем снова элемент 1ba вниз.