React-dnd: 잡히지 않은 오류: 불변 위반: 유효한 대상을 찾아야 합니다.

코드를 공유할 수 있습니까?

네, 실행 가능한 코드를 어딘가에 올려주세요.
또한 많은 사용자가 NPM의 버전을 사용하여 문제를 디버그하기가 더 쉬울 수 있도록 하는 데 도움이 될 것입니다.

여러분을 위해 예제를 설정하는 동안 오류를 발견했습니다. beginDrag 반환된 개체에 ID가 포함되어 있지 않습니다. 아마도 React에는 이에 대한 문제가 있었고, 이로 인해 React-Dnd에서 해당 오류가 발생했을 수 있습니다.

흥미롭네요. 감사합니다! beginDrag() 가 일반 개체인 한 반환되는 항목에 대해 실제로 제한을 두지 않으므로 오류 흐름이 무엇인지 궁금합니다.

오래된 스레드에 추가해서 죄송합니다. 하지만 이것이 인터넷 전체에서 이 오류에 대한 유일한 참조이기 때문에 누군가가 미래에 다음을 유용하게 사용할 수 있다고 생각했습니다.

동일한 오류가 있었지만 문제는 _둘 다_ 드래그 앤 드롭 래퍼로 장식된 구성 요소(예제에서 Card와 유사)가 있다는 것입니다.

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를 반환할 때만 발생합니다. 누구든지 이 문제에 대한 솔루션을 게시할 수 있습니까? 아이디 누락과 관련이 있다고 누군가 말씀하셨는데 아이디를 어디에 넣어야 할지 감이 안오네요?

나는 같은 문제에 직면하고 있습니다. 문서에서 예제를 조정할 수 있었습니다. 첫 번째 요소 주위를 드래그/드롭하여 여기에서 볼 수 있습니다. https://codesandbox.io/s/broken-feather-qf0f2?file= /src/Container.jsx

나는 또한 모든 세부 사항에 대한 문제를 만들었습니다(아마 내가 여기에 방금 게시했어야 했나?)

나는 같은 문제가 있었고 다음과 같이 수정했습니다.

내 코드는 다음과 같았습니다.

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 정말 감사합니다
모바일에서 이 문제에 대해 많은 시간을 절약했습니다.

반응 dnd lib를 사용하여 모바일에서 드래그 드롭하는 동안 동일한 문제에 직면했지만 목록에서 행 열 div를 제거하고 카드 목록만 유지한 후에는 이 오류 없이 작동했습니다. 모바일 브라우저에서 유효한 대상을 얻었습니다.

나는 당신의 게시물에서이 아이디어를 얻었으므로 @marcelomrtnz 에게 감사드립니다.

같은 문제가 있습니다. https://codesandbox.io/s/proud-wind-hklt6?file=/src/CreateForum.jsx
다음은 샌드박스입니다. 항목 1ba를 항목 1 위로 드래그한 다음 항목 1ba를 다시 아래로 끕니다.