React-dnd: 未捕获错误：不变违规：预期找到有效目标。

你能分享你的代码吗？

是的，请将可运行的代码放在某处。
它还可以帮助很多人在 NPM 上使用该版本，以便更轻松地调试问题。

我在为你们设置示例时发现了错误。 我在beginDrag返回的对象不包含 ID。 可能 React 对此有问题，这可能导致 React-Dnd 中出现该错误。

有趣，谢谢！ 我们并没有对beginDrag()返回的内容施加任何限制，只要它是一个普通对象，所以我想知道错误流是什么。

很抱歉添加到旧线程，但由于这是所有 Internet 上对此错误的唯一参考，我认为将来有人可能会发现以下有用。

我有同样的错误，但问题是我有一个组件（类似于示例中的 Card）用 _both_ 拖放包装器装饰。

当simulateBeginDrag开始时，它将 _drop target_（而不是拖动源）发送到验证器，验证器正确失败。 解决方案是在获取处理程序 ID 时深入一层（使用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 丢失了 id（他的内部 id），它可以使用并输出错误。

在我的情况下，当更新减速器中的状态时，我已经更新了父实体的id参数（在行内移动列，并在列更改位置时更新行 ID）。 删除updating id functionality一切开始正常工作。

我也有这个问题。 在我的情况下，只有当 drop target 在 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与ParentOfCards分开的问题

const ParentOfCards = () => {    

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


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

}

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

现在（经过两天的调试 :c ）它可以工作了！ 😁

@marcelomrtnz 非常感谢
您在移动设备上为这个问题节省了我很多时间

我在使用 react dnd lib 在移动设备上拖放时遇到了同样的问题，但是在从列表中删除行列 div 并仅保留卡片列表后，它对我有用而没有出现此错误。 它在移动浏览器上获得了有效目标

我从你的帖子中得到了这个想法，谢谢@marcelomrtnz

我有同样的问题。 https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
这里是沙箱。 将项目 1ba 拖到项目 1 上，然后再次将项目 1ba 拖下。