React重新渲染重叠的div

Question

我正在尝试使用react创建一种无限滚动消息传递组件。我本质上是在里面创建一个包含很多div或消息的div。我正在模拟数据，只加载20条消息来启动，然后在外部div的scrolltop为0时尝试加载其余的消息，这意味着用户想要加载旧消息。

以下是我如何获取新消息：

fetchNewMessages = lastMessageId => {
    const newId = lastMessageId - 20 + 1;
    const newMessages = [
        ...this.state.selectedMessages,
        ...messages[0].messages.slice(newId < 0 ? 0 : newId, 
        lastMessageId).reverse(),
    ];
    this.setState({
      selectedMessages: newMessages,
      lastMessageId: newId < 0 ? 0 : newId,
    });
}

handleScroll = (e) => {
    if (e.target.scrollTop === 0) {
        this.fetchNewMessages(this.state.lastMessageId)
    }
}

我面临的问题是，当我加载新消息时，它似乎会移动div并以某种方式重叠它们。我研究过，其他有类似问题的人说这个密钥是唯一的，所以我给每个邮件发一个唯一的ID，但这仍然无法解决问题。

这是一个显示问题的jsfiddle：https://jsfiddle.net/69z2wepo/180872/

这是所需的输出以及实际输出：

以上是所需输出

这就是我得到的

编辑：我注意到的最奇怪的事情 - 如果你突出显示重叠/看起来很奇怪的消息，他们会以某种方式修复自己。此外，如果您向上滚动以重新创建错误消息然后更改选项卡然后返回到jsfiddle，它将正确显示它们。我很困惑......