Блог

Главная - Вопросы по программированию - Сбой удаления дочернего элемента при изменении состояния в React

Сбой удаления дочернего элемента при изменении состояния в React

#reactjs #youtube-api #media-player

#reactjs #youtube-api #медиаплеер

Вопрос:

Я внедряю смешанные списки воспроизведения (с Youtube и загруженными видео (с использованием react-youtube и Azure Media Player)).

Желаемые функции:

  • Переключение между Youtube (Y) и Y видео.
  • Переключение между загруженными (U) и U видео.
  • Переключение между Y и U видео.
  • Переключение между U и Y видео.
  • Когда Y-видео заканчивается, автоматически воспроизводите следующее видео, если Y.
  • Когда U видео закончится, автоматически воспроизведите следующее видео, если U
  • Когда Y видео закончится, автоматически воспроизведите следующее видео, если U.
  • Когда U видео закончится, автоматически воспроизведите следующее видео, если Y.

Нерабочие функции при переключении с Youtube на uploaded, все остальные параметры работают отлично. Ошибка, показанная при попытке переключиться с Y на U, является:

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

У меня есть CourseDetails компонент, в нем я использую azuremediaplayer/mediaPlayer компонент для U видео и react-youtube . В обоих случаях я изменяю выбранное видео с помощью setState , и я получаю эту ошибку при выполнении этого из U-видео.

Редактировать 1: При переходе с Y на Y или U video компонент не отключается, ни при переключении между U видео. Но при переходе с U на Y это происходит. В обоих случаях я меняю состояние.

Редактировать 2: Проблема в том, что компонент Azure Media Player не может быть удален. Если я не использую этот компонент, переключение работает (хотя в некоторых случаях видео не отображается, так что это бессмысленно).

С радостью поделюсь любым необходимым кодом для решения этой проблемы.

Комментарии:

1. Обычно это происходит, если какой-либо код удаляет элементы DOM, которыми управляет React. Как только React попытается размонтировать компонент, он уже удален из DOM, и вы получите эту ошибку. Обычно исправление заключается в том, чтобы не касаться элементов, непосредственно управляемых React — иногда вам нужно добавить дополнительную оболочку <div> , если другая библиотека тоже хочет очистить свой собственный DOM.

2. Насколько я помню, нет DOM, управляемого React. Могу ли я в любом случае углубиться в поиск этого?

3. Если вы делаете, ReactDOM.render(<Component />, element) тогда React справляется element . Если вы сделаете что-то подобное, $(element).clear() это вызовет эту ошибку, когда React попытается размонтировать Component .

4. Может ли это быть вызвано тем, что в CourseDetails у меня есть ссылка MediaPlayer?

5. Простое наличие ссылки само по себе не должно вызывать этого. Если вы уверены, что ничто не изменяет DOM за пределами React, вы также можете проверить, есть ли какие-либо необработанные исключения, которые могут повлиять на состояние React.

Ответ №1:

оберните видеоэлемент div

  <div>
        <video
            ...
        />
 </div>