반응 DOMException:'노드'에서 'removeChild'를 실행하지 못했습니다.제거할 노드가 이 노드의 하위 노드가 아닙니다.

반응 DOMException:'노드'에서 'removeChild'를 실행하지 못했습니다.제거할 노드가 이 노드의 하위 노드가 아닙니다.

유튜브 동영상 재생이 참이고 거짓이라면 유튜브 재생을 삭제하고 싶습니다.제 코드는 다음과 같습니다.

{this.state.isPreViewVideo && <PlayYouTube video_id="ScSn235gQx0" />}

샌드박스 URL:

https://codesandbox.io/s/xryoz10k6o

재생 방법:

입력 양식에 4자리 문자가 포함되어 있는 경우 setState에 의해 "isPreViewVideo: true"가 되고 false보다 작은 경우

true 상태일 때는 정상적으로 동작하지만 false 상태일 때는 다음과 같은 에러가 발생합니다.

DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

이 오류를 회피하거나 해결할 방법이 있습니까?

행 은, 「YouTube.tsx」 78 을 합니다.<React.Fragment>...</React.Fragment><div>...</div>

fragment를 사용하면 DOM에 노드를 추가하지 않고 하위 목록을 그룹화할 수 있습니다.

이 에러에 대한 하겠습니다.Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

fragment에 대한 자세한 내용은http://https://reactjs.org/docs/fragments.html 를 참조해 주세요.

에러 「」입니다.Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this nodeGoogle Translate(또는 페이지 DOM을 변경하는 다른 플러그인)를 사용하고 있는 경우에도, 를 기동할 수 있습니다.

자세한 내용은 이 Github 문제(https://github.com/facebook/react/issues/11538)를 참조하십시오.

문제 설명:

isPreViewVideo하다

<PlayYouTube video_id="ScSn235gQx0" />

그 결과 다음과 같은 결과가 나올 수 있습니다.

<div> <!-- the root element as rendered by PlayYouTube if isPreViewVideo is truthy -->
  <embed /> <!-- the video player or whatever PlayYouTube renders -->
</div>

DOM을 를 삭제할 div뭐 아무것도 없이.

React의 DOM에서는 ""가 "DOM"으로 되어 .div★★★★★★★★★★★★★★★★★★★! ★★★★★★★★★★★★★★★★★★.isPreViewVideoReact는 실제 DOM에서 삭제하려고 하지만 이미 사라졌기 때문에 오류가 발생합니다.

해결 방법:

@의 답변 - 랩 @henrik123 。PlayYouTube a div★★★★★★★★★★★★。

<div> <!-- the root element rendered if isPreViewVideo is truthy -->
  <PlayYouTube video_id="ScSn235gQx0" />
</div>

...렌더링:

<div> <!-- the root element rendered if isPreViewVideo is truthy -->
  <div> <!-- the element as rendered by PlayYouTube -->
    <embed /> <!-- the video player or whatever PlayYouTube renders -->
  </div>
</div>

한 코드입니다.div요.

<div> <!-- the root element rendered if isPreViewVideo is truthy -->
</div>

, 이제 제, 제isPreViewVideo루트는 React의 가상 DOM과 실제 DOM 양쪽에 존재하므로 삭제에 문제가 없습니다.아이들은 변했지만 리액트는 이 경우 신경 쓰지 않는다. 단지 뿌리를 제거하면 된다.

주의:

('HTML' 이외).div효과가 있을지도 모릅니다.

주 2:

★★로 React.Fragmentdiv 않다React.Fragment【DOM】【DOM】【DOM】【DOM】★★★★★★★★★★★★...

<React.Fragment>
  <PlayYouTube video_id="ScSn235gQx0" />
</React.Fragment>

...결국 이렇게 되는군요:

<div> <!-- the root element as rendered by PlayYouTube if isPreViewVideo is truthy -->
  <embed /> <!-- the video player or whatever PlayYouTube renders -->
</div>

그리고 당신도 같은 문제가 있어요.

TL;DR 솔루션:

PlayYouTube a div.

이 오류는 외부 JS 또는 jQuery 플러그인을 사용할 때 발생할 수 있습니다.제 사건에 대해 말씀드리겠습니다.

이슈설명

리액트 프로젝트에서는 페이지에 링크가 몇 개 있는데, 모든 링크에 정보가 포함된 모달과 이미지가 포함된 슬라이더가 열립니다.모든 링크에는 슬라이더 내부에 자체 이미지 세트가 있습니다.단, 단일 모달은 모든 링크에서 동일합니다.모달의 데이터는 상태 변수에 저장되며 링크를 클릭할 때마다(모달이 열릴 때마다) 내용을 변경합니다.

const initialData = { title: "", intro: "" }; // here is some empty structure of object properties, we need it for the modalResponse initialization
const [modalData, setModalData] = useState(initialData);
// ...
<div id="MyModal">
    <div className="title">{modalData.title}</div>
    <div className="intro">{modalData.intro}</div>
    <div>{modalData.sliderHtml}</div>
</div>

를 사용하여 열기setModalData()나는 채운다modalData새로운 데이터를 가지고 있습니다. 내부 HTML modalData.sliderHtml뭇매를 맞다

<div class="carousel">
    <div class="item"><img src="first.jpg" /></div>
    <div class="item"><img src="second.jpg" /></div>
    <div class="item"><img src="third.jpg" /></div>
</div>

모달이 열리면 슬라이더 초기화를 위해 jQuery 코드를 호출합니다.

useEffect(() => {
    $('.carousel').initCarousel({
        // some options
    });
}, [modalData]);

그런 다음 모드를 닫고 다음 링크를 클릭합니다.슬라이더는 새 영상 세트로 채워져야 합니다.'오류나다'라는 .Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

오류 이유

이 문제의 원인은 jQuery 플러그인이 초기화 중에 html 구조를 변경하기 때문입니다.새로운 블록이 생성됩니다..carouselparent오른쪽 , 점 등parent([/ ] / [ ], [ ] )는 모두 이동합니다..item 아이들.itemsblock!후 : block! 플러그인 초기화 후 다음과 같은 html 구조가 나타납니다.

<div class="carousel">
    <div class="dots">...</div>
    <div class="arrows">...</div>
    <div class="items">
        <div class="item"><img src="first.jpg" /></div>
        <div class="item"><img src="second.jpg" /></div>
        <div class="item"><img src="third.jpg" /></div>
    </div>
</div>

가 React의 을 하려고 할 때modalData.sliderHtml오래된 구조물을 제거하기 위해 몇 가지 마법의 DOM 작업을 실행합니다.는, 「」입니다.removeChildmethod,단, 「」, 「」의 입니다..item에 요소를 수 ..carousel입니다..items 오류가 하게 됩니다.그래서 오류가 발생하게 됩니다.

버그 수정

는 바뀌기 했다.modalData.modal은 initialData로 돌아갑니다.

useEffect(() => {
    $('#MyModal').on('hidden.bs.modal', function (e) {
        setModalData(initialData);
    })
}, []);

html 내의 구조는 html 입니다.modalData.sliderHtml다시 첫 번째 빈 데이터로 채워지고 새 링크 클릭 시 오류가 나타나지 않습니다.

버튼을 수동으로 닫은 후 부트스트랩 경고 해결

부트스트랩 경보 오류 메시지가 수동으로 표시되는 경우 메시지를 닫고 다시 양식을 제출할 때 오류가 발생했습니다.제가 한 일은 AlertError 컴포넌트를 태그로 감싸는 것이었습니다.

import React from "react";

const AlertError = (props) => {
    return (
        <div> // <---- Added this
            <div className="alert alert-custom alert-notice alert-light-danger fade show" role="alert">
                <div className="alert-icon"><i className="flaticon-warning"></i></div>
                <div className="alert-text">There is an error in the form..!</div>
                <div className="alert-close">
                    <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i className="ki ki-close"></i></span>
                    </button>
                </div>
            </div>
        </div> // <---- Added this
    );
};

export default AlertError;

오디오 태그에도 같은 문제가 있어서 이 태그를 2개의 네스트된 div 안에 두었더니 동작하고 있습니다.

이치노는 ,, 조, 조, 조, 조, 조, 조, but, but, but, but, but, but, but, but, but, but, but, but, but, the, the, the, , the,span★★★★★★ 。

다음 GitHub 문제를 확인합니다.https://github.com/facebook/react/issues/11538#issuecomment-390386520

가장 가능성이 높은 원인: 리액트 후 DOM을 수정한 것

이 문제의 가장 가능성이 높은 원인은 리액트 이외의 것이 리액트 후에 DOM을 수정했기 때문입니다.

이 DOM 돌연변이의 원인은 무엇입니까?

영향을 받는 사용자의 프로파일에 따라 몇 가지 다른 원인이 있을 수 있습니다.

모두들

모든 사용자가 영향을 받는 경우 개발자가 원인일 수 있습니다.

원인은 아마도 jQuery를 사용하거나 React 외부에서 DOM 조작을 하기 때문일 것입니다.

통상의 유저

통상적인 유저가 영향을 받는 경우는, Google Chrome 번역 기능(또는 Microsoft 의 Edge Chromium 의 번역 기능)이 원인이라고 생각됩니다.

즉, '하다'를 .<meta> 붙이기 。<head>(Google 매뉴얼).

<meta name="google" content="notranslate" />

이것에 의해, Edge Cromium 의 Microsoft Translator 도 무효가 됩니다.

고급 사용자

영향을 받는 것은 상급 사용자뿐이며 브라우저 상에서 변환 기능을 사용하지 않는 경우 문제의 원인은 브라우저 확장 기능 또는 일부 사용자 스크립트(SpiderMonkey에 의해 실행됨)일 수 있습니다.

상세 정보

• 리액트 리포에 관한 문제
• Solid JS도 영향을 받습니다.
• 크롬 버그 트래커 발행 (우선순위 부여에 도움이 되도록 별표를 달아주세요)

코드에는 다음과 같은 것이 있었습니다.

render() {
 if (el) return <div />

 return '';
}

를 null로 치환하면, 모든 것이 에러 없이 동작합니다.

나도 리액션에서 같은 문제가 있었어.이 문제는 index.html의 google-auth 스크립트태그로 인해 발생하였습니다.

<script src="https://accounts.google.com/gsi/client" async defer></script>

JS파일에 다른 파일이 있어서 문제가 발생하였습니다.CDN의 경합 또는 반복을 확인합니다.

제 경우 상태를 재설정하거나 새 데이터로 렌더링해야 할 때 초기 데이터로 만들면 됩니다.이것으로 문제가 해결되었습니다.

예: useFetch에서 API 응답을 받았을 때 테이블 데이터를 설정할 때 이 문제가 발생하였습니다.데이터를 상태로 설정하기 전에 먼저 초기값으로 설정합니다.setTableData([]; setTableData(data.response);

도움이 됐으면 좋겠어요.

• Node.remove Child() - Web API | MDN

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

수정:

   unmountContainer() {
      // macro task
      setTimeout(() => {
        // refs
        if (containerEle) {
          // receive removed node
          // eslint-disable-next-line no-unused-vars
          let removedChild = document
            .querySelector('.page__wrapper')
            .removeChild(containerEle);
        }
      });
    }

언급URL : https://stackoverflow.com/questions/54880669/react-domexception-failed-to-execute-removechild-on-node-the-node-to-be-re