React-dnd: キャッチされないエラー：不変の違反：有効なターゲットを見つけることが期待されます。

コードを共有できますか？

ええ、実行可能なコードをどこかに置いてください。
また、多くの人がNPMのバージョンを使用できるので、問題のデバッグが容易になります。

皆さんのために例を設定しているときにエラーを見つけました。 beginDrag返したオブジェクトには、IDが含まれていません

おもしろい、ありがとう！ プレーンオブジェクトである限り、 beginDrag()が返すものに実際に制限を課すことはないので、エラーフローは何だったのでしょうか。

古いスレッドに追加して申し訳ありませんが、これはすべてのインターネットでこのエラーへの唯一の参照であるため、誰かが将来的に次のことが役立つかもしれないと思いました。

同じエラーが発生しましたが、問題は、ドラッグアンドドロップラッパーの両方で装飾されたコンポーネント（例のCardと同様）があることでした。

simulateBeginDragが開始されると、（ドラッグソースの代わりに）_drop target_がバリデーターに送信されましたが、正しく失敗しました。 解決策は、ハンドラーIDを取得するときに1レベル深く（ getDecoratedComponentInstance() ）すること

@yannisbarlas素晴らしい発見。 私はまったく同じ問題に遭遇しました。 たぶん、テストドキュメントでこれについて言及することができますか？

@yannisbarlas見つけてくれてありがとう！ たくさんの欲求不満を大いに助けてくれました:)

誰かがこのエラーと問題に遭遇した場合に備えて、ソート可能なリストと、リスト上のIDとインデックスの連結で構成されるキーを持つ各アイテムを作成するときに同様の問題が発生しました。
修正は、ドラッグする要素に適切な（つまり一貫性のある）キーを設定することで簡単に実行されました。

@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

ドロップエリアも動的に作成しました。
どのように修正しましたか？

つまり、問題は、親（上位レベル）コンポーネントを再度作成したことである可能性があります。
この場合、react-dnd lost id（彼の内部ID）が機能し、エラーが出力されます。

私の場合、レデューサーの状態を更新するときに親エンティティのidパラメーターを更新しました（行内の列を移動し、列の場所が変わると行IDを更新します）。 updating id functionality削除すると、すべてが正しく機能し始めます。

私もこの問題を抱えています。 私の場合、ドロップターゲットがcanDropでfalseを返した場合にのみ発生します。 誰かがこの問題の解決策を投稿できますか？ 誰かがIDの欠落に関連していると言いましたが、IDをどこに置くべきかわかりませんか？

私は同じ問題に直面しています。ドキュメントから例を微調整することができました。最初の要素をドラッグ/ドロップすることでここに表示されます： https ：

また、すべての詳細を含む問題を作成しました（たぶん、ここに投稿する必要がありますか？）＃2693

私は同じ問題を抱えていました、そして私はそれをこのように修正しました：

私のコードは次のようになりました

const ParentOfCards = () => {    

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

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

}

CardComponentをParentOfCards CardComponent中に入れることはできないことがわかったので（再レンダリングに関係していると思います）、 CardComponentをParentOfCardsから分離して解決しました

const ParentOfCards = () => {    

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


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

}

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

そして今（2日間のデバッグ後：c）それは動作します！ 😁

@marcelomrtnzありがとうございました
あなたはモバイルでこの問題に私の多くの時間を節約しました

反応dndlibを使用してモバイルでドラッグアンドドロップ中に同じ問題に直面していましたが、リストから行列divを削除し、カードリストのみを保持した後、このエラーなしで機能しました。 モバイルブラウザでその有効なターゲットを取得しました

私はあなたの投稿からこのアイデアを得たので、 @ marcelomrtnzに感謝します

同じ問題があります。 https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
これがサンドボックスです。 アイテム1baをアイテム1の上にドラッグしてから、アイテム1baをもう一度下にドラッグします。