向消息添加/删除表情符号反应-仅在刷新页面时有效

Question

我正在为我的聊天应用程序添加表情符号反应。我希望用户仅对某条消息使用某种表情符号做出反应（显然）。如果他们再次点击表情符号，他们将对此没有反应。消息是一个对象，其属性之一是反应，它也是一个对象。每个键都是冒号形式的反应名称，每个emoji表情属性都有与该emoji表情做出反应的用户数组。

这就是消息的外观（不包含其他属性）：

{
  reactions: {
    ":smile:": [
      //...
    ]
  }
}

现在，我有一个函数，只要用户尝试与特定的表情符号做出反应，就会调用该函数，称为hasReacted。

hasReacted = (message, emoji) => {
  message.reactions = message.reactions || {}
  message.reactions[emoji] = message.reactions[emoji] || []

  const i = message.reactions[emoji].findIndex(user =>
    JSON.stringify(user) === JSON.stringify(this.props.user)
  )

  if(i === -1) {
    return false
  }
  else {
    return true
  }
}

由于某些原因，此功能仅在登录用户刷新聊天应用程序后才能正常使用。我觉得这可能与以下事实有关：当前登录的用户作为道具传递给hasReacted所在的组件。任何想法可能导致此问题？我将当前登录的用户存储在localStorage和firebase btw中。

所以这是我上次检查时有效的方法，但是我在登录用户和填充内容时遇到了一些问题，因此我更改了生成用户对象的组件，此后停止了工作。