Question

我遇到了与聊天机器人中重新渲染过程有关的问题。这是问题所在：

我创建了一个返回字符串（支持HTML）的函数，该字符串的格式类似于HTML。这是utils.ts：

export function formaterForUi(text: string) {

function Video() {
    formattedMessage = text.replace(/\!\[Video\]\((((https?\:\/\/)|(www\.))(\S+))/gi,
      function (fullText) {
        let fromHttp = fullText.substring(9)
        return fromHttp.replace(/((https?\:\/\/)|(www\.))(\S+)/gi,
          function (videoURLWithLastCharacter) {
            let videoUrl = videoURLWithLastCharacter.substring(0, videoURLWithLastCharacter.length - 1);
            return '<div style="max-width: 600px; margin:7px 0px;"><video style="height: auto; width:100%;" controls><source src="' + videoUrl + '" type="video/mp4"></video></div>'
          })
      });
  }

vedio();

return formattedMessage;
}

此函数将从输入字符串中找到提及的正则表达式，并将其格式化为HTML（GUI）中的视频格式。

这是模具中的主要.tsx文件。

formatChatMessages() {
      let count = 0
      while (count < this.chats.length) {
         this.chatBubbleElement.shadowRoot.querySelector("#chat-id-" + (count)).innerHTML = formaterForUi(this.chats[count].message, this.sorryMessageArray)
        count++
      }
  }

此处，有多个视频聊天响应，因此每次此功能都会格式化浏览器可以支持的格式。 “聊天”是包含所有回复的数组

  componentDidUpdate() {
    this.formatChatMessages()
   }

我在ComponentDidUpdate生命周期中调用了此特定函数（formatChatMessages（））。因此，每次我在文本框中输入内容时，都会在一段时间内重新渲染所有视频聊天。您可以在Chrome开发者工具的“网络”标签中看到请求一直在发送。

作为预期结果，我希望每次都停止重新渲染视频，并且如果我未在componentDidUpdate中调用它，它将不会格式化其他聊天记录。

请在此处提供解决方案

停止重新渲染聊天

0 个答案: