[Q&A]改变了宫格布局，DOM结构变化了，如何重新更新显示？

[shitudouya]

开发环境：vue3 + trtc-sdk-v5@5.5.2 问题描述：我模仿了官方示例，使用了右侧成员列表等布局，当切换布局的时候，之前容器id渲染到其他位置，导致DOM结构变化，视频不渲染了，我尝试使用trtc.on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, handleVideoStateChange)来解决问题：

const handleVideoStateChange = async (event) => {
  let { state, userId, streamType } = event;
  if (state === "PAUSED") {
    if (userId) {
      if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
        await nextTick();
        await trtc.updateRemoteVideo({
          userId,
          view: `${userId}_main`,
          streamType,
        });
      } else {
        await nextTick();
        await trtc.updateRemoteVideo({
          userId,
          view: `${userId}_screen`,
          streamType,
        });
      }
    } else {
      await nextTick();
      await trtc.updateLocalVideo({
        view: "local",
      });
    }
  }
};

发现切换的前几次可以正常渲染了，但是我多次切换测试后容器依旧变空白，video没有渲染了，我不知道该采用啥思路来解决这种问题，希望能解答

[wbxl2000]

您好，这个问题监听播放状态可能不会很准确，因为涉及到这也是 “UI 操作导致的副作用”

这里可以直接在切换布局后 + nextTick() UI 更新完成时，直接统一调用一遍 updateRemoteVideo({ view: '你期待的新布局 id' })

可以尝试一下，有疑问我们可以再一起探讨

[shitudouya]

非常感谢，经过尝试，目前显示正常了。