submitMessage方法中数组push元素被覆盖问题求助

你的问题核心在于每次调用submitMessage()时，都会重新创建一个空数组：

const array = []; // 每次调用方法都会初始化新的空数组

这就导致每次push后数组里只有当前这次的元素，长度永远是1，根本无法累积之前的消息。

修复步骤 #

1. 把数组的声明移到方法外部，作为组件的实例属性，这样所有方法调用都共享同一个数组：

// 在组件的构造函数或者类属性里初始化数组
constructor() {
  // ...其他初始化代码
  this.messagesArray = [];
}

2. 修改submitMessage()里的代码，使用实例上的数组而非局部数组：

submitMessage() {
  const personMessage = this.avatarContainerTarget.classList.contains("hidden");
  var message = this.messageFieldTarget.value;
  var time = this.messageTimeFieldTarget.value;

  const messageRecieve = `<div class="message message-received is-not remove"><div class="message-container"><div class="message-text"><p>${message}</p></div></div><div class="message-footer"><div class="message-footerItem"><span class="timestamp">${time}</span></div></div></div>`;

  const messageSent = `<div class="message message-sent is-not remove"><div class="message-container"><div class="message-text"><p>${message}</p></div></div><div class="message-footer"><div class="message-footerItem"><span class="timestamp">${time}</span><svg viewBox="0 0 24 24"><g><path d="M9 20c-.264 0-.52-.104-.707-.293l-4.785-4.785c-.39-.39-.39-1.023 0-1.414s1.023-.39 1.414 0l3.946 3.945L18.075 4.41c.32-.45.94-.558 1.395-.24.45.318.56.942.24 1.394L9.817 19.577c-.17.24-.438.395-.732.42-.028.002-.057.003-.085.003z"></path></g></svg></div></div></div>`;

  if (personMessage === true) {
    this.messagesArray.push(messageSent); // 操作实例数组
    this.twitterChatBodyTarget.insertAdjacentHTML("afterbegin", messageSent);
    this.mobileTwitterChatBodyTarget.insertAdjacentHTML(
      "afterbegin",
      messageSent
    );
  } else {
    this.messagesArray.push(messageRecieve); // 操作实例数组
    this.twitterChatBodyTarget.insertAdjacentHTML("afterbegin", messageRecieve);
    this.mobileTwitterChatBodyTarget.insertAdjacentHTML(
      "afterbegin",
      messageRecieve
    );
  }

  console.log(this.messagesArray); // 现在数组会累积所有元素
  this.messagesArrayTarget.value = this.messagesArray;
}

额外说明 #

• 如果你的项目是Vue/React这类框架，要注意响应式问题：Vue中直接push数组是响应式的，但如果是替换整个数组需要用Vue.set或者重新赋值；React中需要用setState更新数组状态。
• 另外，你当前用insertAdjacentHTML("afterbegin")会把新消息插在聊天框最前面，通常聊天消息是追加到末尾，建议改成beforeend更符合用户习惯。

内容的提问来源于stack exchange，提问作者Mauricio Gutiérrez