React-dnd: Erro não detectado: Violação invariável: Esperado encontrar um alvo válido.

Você pode compartilhar seu código?

Sim, por favor coloque o código executável em algum lugar.
Também ajudaria muito se vocês pudessem usar a versão no NPM, então seria mais fácil depurar o problema.

Encontrei o erro ao configurar um exemplo para vocês. O objeto que retornei em beginDrag não continha um id. Provavelmente o React teve um problema com isso, o que pode ter causado o erro no React-Dnd.

Interessante, obrigado! Não impomos nenhuma restrição sobre o que beginDrag() retorna, desde que seja um objeto simples, então eu me pergunto qual foi o fluxo de erro.

Desculpe por adicionar a um tópico antigo, mas como esta é a única referência a esse erro em toda a Internet, pensei que alguém poderia achar o seguinte útil no futuro.

Eu tive o mesmo erro, mas o problema era que eu tinha um componente (semelhante ao Cartão nos exemplos) que estava decorado com _both_ wrappers de arrastar e soltar.

Quando simulateBeginDrag começou, ele enviou o _drop target_ (ao invés da fonte de arrastar) para o validador, que falhou corretamente. A solução era ir para um nível de profundidade (com getDecoratedComponentInstance() ) ao obter a id do manipulador.

@yannisbarlas great find. Corri para o mesmo problema exato. Talvez possa haver uma menção a isso nos documentos de teste ?

@yannisbarlas Muito obrigado pela descoberta! Me ajudou muito com muita frustração :)

Caso alguém tropece neste erro e problema, tive um problema semelhante ao compor uma lista classificável e cada item tendo uma chave composta da concatenação de seu id e seu índice na lista.
A correção foi feita simplesmente definindo uma chave adequada (ou seja, consistente) para o elemento que está sendo arrastado.

@yannisbarlas Você tem um exemplo de código de sua solução?

Desculpe pela resposta tardia @damiangreen , o e-mail de notificação passou direto por mim.

O código está obsoleto (já faz um tempo), mas você pode conferir aqui .

Se alguém ainda tiver esse problema, observe que o elemento da lista que você está mapeando precisa ter uma prop chave persistente . No meu caso, eu estava despachando uma ação Redux para alterar os itens na lista e, em seguida, fornecendo a chave para o elemento mapeado assim:

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

que aparentemente dispara o erro, porque idx está mudando rapidamente.

obrigado @chulanovskyi
para mim era assim:
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> ))

Para mim, esse erro é causado por áreas para soltar criadas dinamicamente - quando o último item é movido de uma área para soltar, o React é renderizado novamente sem essa área e isso parece causar a exceção. Talvez seja uma condição de corrida em que a área é removida pouco antes de mover o item embora os grupos sejam derivados dos mesmos itens mudar hmm

Para mim, esse erro é causado por áreas para soltar criadas dinamicamente - quando o último item é movido de uma área para soltar, o React é renderizado novamente sem essa área e isso parece causar a exceção. Talvez seja uma condição de corrida em que a área é removida pouco antes de mover o item embora os grupos sejam derivados dos mesmos itens mudar hmm

Olá @DominicTobias
Eu também criei áreas para soltar dinamicamente.
Como você consertou isso?

@ raymond-ong

Eu também criei áreas para soltar dinamicamente.
Como você consertou isso?

Em outras palavras, o problema pode ser que você criou o componente pai (nível superior) novamente.
Neste caso, o reac-dnd perdeu o id (seu id interno) com o qual está funcionando e um erro de saída.

No meu caso, atualizei o parâmetro id da entidade pai ao atualizar o estado no redutor (mover colunas dentro da linha e atualizar o id da linha quando as colunas mudarem de lugar). Depois de remover updating id functionality tudo começa a funcionar corretamente.

Eu também tenho esse problema. No meu caso, isso só acontece quando o drop target retorna falso em canDrop. Alguém pode postar sua solução para este problema? Alguém mencionou que está relacionado à falta de identidade, mas não tenho certeza de onde colocá-la.

Estou enfrentando o mesmo problema, consegui ajustar um exemplo dos documentos, você pode vê-lo aqui arrastando / soltando o primeiro elemento: https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Container.jsx

Eu também criei um problema com todos os detalhes (talvez eu devesse ter apenas postado aqui?) # 2693

Eu tive o mesmo problema e resolvi assim:

meu código parecia

const ParentOfCards = () => {    

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

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

}

Acontece que você não pode colocar CardComponent dentro de ParentOfCards (acho que tem a ver com re-renderização), então resolvi separando CardComponent de ParentOfCards Âmbito de

const ParentOfCards = () => {    

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


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

}

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

E agora (depois de dois dias de depuração: c) funciona! 😁

@marcelomrtnz muito obrigado
Você economizou muito tempo com esse problema no celular

Eu estava enfrentando o mesmo problema ao arrastar e soltar no celular com react dnd lib, mas depois de remover divs de coluna de linha da lista e manter apenas a lista de cartões funcionou para mim sem esse erro. Ele conseguiu aquele alvo válido no navegador móvel

Tive essa ideia a partir de sua postagem, então obrigado @marcelomrtnz

Eu tenho o mesmo problema. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Aqui está a sandbox. arraste o item 1ba sobre o item 1 e, em seguida, o item 1ba para baixo novamente.