React-dnd: Error no detectado: infracción invariable: se esperaba encontrar un objetivo válido.

¿Puedes compartir tu código?

Sí, coloque el código ejecutable en alguna parte.
También ayudaría a muchos de ustedes a usar la versión en NPM para que sea más fácil depurar el problema.

Encontré el error al configurar un ejemplo para ustedes. El objeto que devolví en beginDrag no contenía una identificación. Probablemente React tuvo un problema con eso, lo que podría haber causado ese error en React-Dnd.

Interesante, gracias! Realmente no imponemos ninguna restricción sobre lo que devuelve beginDrag() siempre que sea un objeto simple, así que me pregunto cuál fue el flujo de error.

Perdón por agregar a un hilo antiguo, pero dado que esta es la única referencia a este error en todo Internet, pensé que alguien podría encontrar útil lo siguiente en el futuro.

Tuve el mismo error, pero el problema era que tenía un componente (similar a Card en los ejemplos) que estaba decorado con _both_ drag and drop wrappers.

Cuando comenzó simulateBeginDrag , envió el _drop target_ (en lugar de la fuente de arrastre) al validador, que falló correctamente. La solución fue ir un nivel profundo (con getDecoratedComponentInstance() ) al obtener la identificación del controlador.

@yannisbarlas gran descubrimiento. Me encontré con el mismo problema exacto. ¿Quizás pueda haber una mención de esto en los documentos de prueba ?

@yannisbarlas ¡ Muchas gracias por el hallazgo! Me ayudó mucho a sentir mucha frustración :)

En caso de que alguien tropiece con este error y problema, tuve un problema similar al componer una lista ordenable y cada elemento tiene una clave compuesta por la concatenación de su identificación y su índice en la lista.
La corrección se realizó simplemente estableciendo una clave adecuada (es decir, coherente) para el elemento que se arrastra.

@yannisbarlas ¿Tiene un ejemplo de código de su solución?

Perdón por la respuesta tardía @damiangreen , el correo electrónico de notificación pasó volando.

El código ha quedado obsoleto (ha pasado un tiempo), pero puede consultarlo aquí .

Si alguien todavía se ejecuta en este problema, tenga en cuenta que el elemento de la lista que está mapeando debe tener un apoyo clave persistente . En mi caso, estaba enviando una acción Redux para cambiar los elementos de la lista y luego proporcionando la clave del elemento mapeado de esta manera:

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

que aparentemente dispara el error, porque idx está cambiando sobre la marcha.

gracias @chulanovskyi
para mí se veía así:
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 mí, este error es causado por áreas de colocación creadas dinámicamente: cuando el último elemento se mueve de un área de colocación, React vuelve a renderizar sin esa área y esto parece causar la excepción. Quizás es una condición de carrera en la que el área se elimina justo antes de mover el elemento, aunque los grupos se derivan del mismo cambio de elementos hmm

Para mí, este error es causado por áreas de colocación creadas dinámicamente: cuando el último elemento se mueve de un área de colocación, React vuelve a renderizar sin esa área y esto parece causar la excepción. Quizás es una condición de carrera en la que el área se elimina justo antes de mover el elemento, aunque los grupos se derivan del mismo cambio de elementos hmm

Hola @DominicTobias
También he creado áreas de caída dinámicamente.
¿Cómo lo arreglaste?

@ raymond-ong

También he creado áreas de caída dinámicamente.
¿Cómo lo arreglaste?

En otras palabras, el problema puede ser que haya creado nuevamente el componente principal (nivel superior).
En este caso, react-dnd perdió la identificación (su identificación interna) con la que funciona y tiene un error de salida.

En mi caso, actualicé el parámetro id de la entidad principal cuando actualicé el estado en el reductor (mueva las columnas dentro de la fila y actualice la identificación de la fila cuando las columnas cambien de lugar). Después de eliminar updating id functionality todo comienza a funcionar correctamente.

También tengo este problema. En mi caso, solo sucede cuando el destino de caída devuelve falso en canDrop. ¿Alguien puede publicar su solución a este problema? Alguien mencionó que está relacionado con la identificación faltante, pero no estoy seguro de dónde poner la identificación.

Estoy enfrentando el mismo problema, logré modificar un ejemplo de los documentos, puede verlo aquí arrastrando / soltando el primer elemento: https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Container.jsx

También creé un problema con todos los detalles (¿tal vez debería haber publicado aquí?) # 2693

Tuve el mismo problema y lo solucioné así:

mi código se veía como

const ParentOfCards = () => {    

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

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

}

resulta que no puedes poner CardComponent dentro de ParentOfCards (creo que tiene que ver con re-renderizaciones), así que lo resolví separando CardComponent del ParentOfCards alcance:

const ParentOfCards = () => {    

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


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

}

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

Y ahora (después de dos días de depuración: c) ¡funciona! 😁

@marcelomrtnz Muchas gracias
Me ahorraste mucho tiempo en este tema en dispositivos móviles.

Me enfrentaba al mismo problema mientras arrastraba y soltaba en el dispositivo móvil con react dnd lib, pero después de eliminar los divs de columna de fila de la lista y mantener solo la lista de tarjetas, funcionó para mí sin este error. Obtuvo ese objetivo válido en el navegador móvil

Saqué esta idea de tu publicación, así que gracias @marcelomrtnz

Tengo el mismo problema. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
Aquí está la caja de arena. arrastre el elemento 1ba sobre el elemento 1 y luego el elemento 1ba hacia abajo nuevamente.