时间戳

首页 > 解决方案 > 卸载组件时无法执行“removeChild”

reactjs - 卸载组件时无法执行“removeChild”

问题描述

我目前正在集成一个视频聊天，人们可以在其中切换不同的房间。那部分效果很好。现在我想添加一个额外的组件。如果我在加载 Daily 组件时单击“另一个组件”，则会收到错误消息：

在“节点”上执行“removeChild”失败：要删除的节点不是该节点的子节点。

错误视频示例：https ://www.loom.com/share/e9b03203fe42458f8b0abd44d250517b

我创建了以下沙箱来演示问题：https ://codesandbox.io/s/agitated-blackburn-oorng?file=/src/App.js

问题似乎与dailyRef.current.destroy();. 如果视频未处于“加载完成”状态，则无法执行。

标签： reactjs

解决方案

这是daily.destroy方法的实现

 async destroy() {
    try {
      "joined-meeting" === this._meetingState && (await this.leave());
    } catch (t) {}
    let t = this.iframe();
    if (t) {
      let e = t.parentElement;
      e && e.removeChild(t);
    }
    window.removeEventListener("message", this._messageListener);
  }

您可以从必要的位中提取并且仅清理事件侦听器

  return () => {
    try {
      "joined-meeting" === daily._meetingState && (await daily.leave());
    } catch (t) {}

    window.removeEventListener("message", daily._messageListener);
};

推荐阅读