React DOMException: не удалось выполнить «removeChild» на «узле»: удаляемый узел не является дочерним элементом этого узла

В playYouTube.tsx строку 78 заменить <React.Fragment>...</React.Fragment> с <div>...</div>

Fragments let you group a list of children without adding extra nodes to the DOM.

Это объясняет ошибку Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Подробнее о фрагментах здесь https://reactjs.org/docs/fragments.html

У меня были такие же проблемы с аудиотегом, и я сохранил этот тег в двух вложенных div, и теперь он работает

Эта ошибка Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node также может возникать, если используется Google Translate (или любой другой плагин, который изменяет DOM страницы).

Это подробно описано в этом выпуске Github: https://github.com/facebook/реагировать/issues/11538.

• Node.removeChild() — веб-API | МДН

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);
        }
      });
    }

Объяснение проблемы:

Когда 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, вы получите... Ну, ни с чем.

Но в виртуальном DOM React корень div все еще существует! Поэтому, когда isPreViewVideo становится ложным, React пытается удалить его из реального DOM, но, поскольку он уже ушел, выдается ошибка.

Решение:

Чтобы расширить ответ @ henrik123 - обернуть PlayYouTube таким 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 становится ложным, корень существует как в виртуальной DOM React, так и в реальной DOM, поэтому нет проблем с его удалением. Это дети изменились, но React в этом случае все равно - ему просто нужно удалить корень.

Примечание:

Другие элементы HTML, кроме div, тоже могут работать.

Заметка 2:

Обтекание React.Fragment вместо div не сработает, потому что React.Fragment ничего не добавляет к реальному 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 решение:

Оберните PlayYouTubediv.

Эта ошибка может возникнуть при использовании внешних плагинов JS или jQuery. Расскажу о своем случае.

Описание проблемы

В моем проекте React у меня есть несколько ссылок на странице, каждая ссылка открывает модальное окно с некоторой информацией и слайдером с изображениями внутри него. Каждая ссылка имеет свой собственный набор изображений внутри слайдера. Но у меня один модальный, он одинаковый для каждой ссылки. Данные для модального режима хранятся в переменной состояния, и я меняю его содержимое при каждом нажатии ссылки (при каждом открытии модального окна):

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 при инициализации. Создает новые блоки внутри родителя .carousel (стрелки влево/вправо, точки для навигации и т. д.). И он перемещает всех .item детей внутри нового .items блока! Я получаю такую ​​структуру 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 для удаления старой структуры. Одной из таких операций является метод removeChild, но старые элементы .item не могут быть найдены внутри родительского элемента .carousel, потому что плагин переместил их внутрь нового элемента .items. Итак, получаем ошибку.

Исправление ошибок

Я начал менять содержимое modalData обратно на структуру initialData каждый раз, когда модальное окно закрывается.

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

Таким образом, вся html-структура внутри modalData.sliderHtml снова заполняется исходными пустыми данными, и мы не получаем ошибку при переходе по новой ссылке.

В одном месте нашего кода было что-то вроде этого:

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

 return '';
}

После замены '' на ноль все работает без ошибок.

SOLVED for bootstrap alert after manually close button

У меня была точная ошибка, когда я закрывал сообщение об ошибке предупреждения о начальной загрузке, если оно было там вручную, а затем снова отправлял форму. что я сделал, так это обернул компонент 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;