React-dnd: monitor.isDragging () às vezes retorna falso quando deveria retornar verdadeiro

@amoenk Sim, precisaremos de um código de exemplo para ajudá-lo.

Obrigado pela ajuda! Aqui está o exemplo de trabalho: http://notlouieagain.com/~amoenk/dnd/

E este link para navegar pelo código desagregado: http://notlouieagain.com/~amoenk/dnd/js/

Oh, eu incluí o código de demonstração simples e classificável original lá também enquanto estava depurando, mas os componentes importantes são Ingredient e IngredientGroup.

Dei uma olhada no seu código e não consigo encontrar o componente DnDStudy . Você pode me mostrar o seu código completo e somente o seu. Você pode remover o código de demonstração.

Código de demonstração removido, o componente DnDStudy é um componente da página aqui: http://notlouieagain.com/~amoenk/dnd/js/pages/DnDStudy.react.js

Ok, dei uma olhada e acredito que pode ser um problema devido às chaves de IngredientGroup dentro de DnDStudy . Em vez de confiar no índice do array, tente usar algum id único semelhante ao de Ingredient dentro de IngredientGroup .

Código atualizado, mas ainda com o mesmo problema.

OK. Eu estava errado então.

@gaearon você pode ajudar?

Para que isDragging trabalhe na árvore de componentes, implemente manualmente isDragging em sua fonte de arrastar.

const ingredientSource = {
    beginDrag(props) {
        return { ingredient: props.ingredient };
    },
    isDragging(props, monitor) {
        return props.ingredient === monitor.getItem().ingredient;
    }
};

Veja DragSource docs :

isDragging(props, monitor) : opcional. Por padrão, apenas a fonte de arrastar que iniciou a operação de arrastar é considerada como arrastando. Você pode substituir esse comportamento definindo um método isDragging . Ele pode retornar algo como props.id === monitor.getItem().id . Faça isso se o componente original puder ser desmontado durante o arrasto e posteriormente “ressuscitado” com um pai diferente. Por exemplo, ao mover um cartão pelas listas em um quadro Kanban, você deseja que ele retenha a aparência arrastada - embora, tecnicamente, o componente seja desmontado e um diferente seja montado toda vez que você o mover para outra lista. _Observação: Você não pode chamar monitor.isDragging() dentro deste método._

Isso ajuda?

Funciona perfeitamente! Deve ter esquecido isso nos documentos.

Obrigado por toda sua ajuda! Vou fechar o tíquete.

Sem problemas. Feliz por ajudar.

meh! Links para http://notlouieagain.com/ não estão respondendo ...

Eu encontrei a causa raiz do meu problema. Tive que parar de usar o DragDropContextProvider para envolver meus DropTargets e DragSources. Veja o exemplo abaixo.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context-provider.html

export default class YourApp {
    render() {
        return (
            <DragDropContextProvider backend={HTML5Backend}>
                /* ... */
            </DragDropContextProvider>
        )
    }
}

Em vez disso, tive que usar o DragDropContext para embrulhar minha classe inteira como abaixo.
http://react-dnd.github.io/react-dnd/docs-drag-drop-context.html

class YourApp {
    /* ... */
}
export default DragDropContext(HTML5Backend)(YourApp)

Isso resolveu imediatamente o problema para mim.