javascript - 当我使用大对象运行 setState 时，我的组件会从 DOM 中删除

Question

我正在构建一个应用程序，可让您通过拖放来组织表情符号。我有一个在 drop 上运行的方法，可以对大量表情符号对象进行排序。当我运行 setState 并将对象提交回父组件的状态时，React 会从 DOM 中删除父组件。它只是消失了......控制台中没有错误，使用反应开发工具我可以看到组件状态实际上已经用新对象更新。任何帮助将非常感激。

这种排序机制通过 props 将更新后的对象发送到它的父组件：

  endDrag(props, monitor, dragComponent) {
    if (monitor.didDrop()) {

      let sourceEmoji = dragComponent.props.emoji
      let targetEmoji = monitor.getDropResult().props.emoji

      const updatedCategorizedEmojis = props.categorizedEmojis.map((category)=> {
        return category.emojis.map((emoji, idx)=> {
          if (emoji.id == sourceEmoji.id) {
            emoji['newPosition'] = (targetEmoji['newPosition'] - 0.5)
            return emoji
          } else {
            return emoji
          }
        }).sort((a,b)=> {
          if (a['newPosition'] > b['newPosition']) {
            return 1
          }
          if (a['newPosition'] < b['newPosition']) {
            return -1
          }
        }).map((emoji, idx)=> {
          emoji['newPosition'] = idx
          return emoji
        })
      })

      props.updateSortedEmojis(updatedCategorizedEmojis)

    }
  }

对象数组如下所示：

整个事情都被添加到父级的状态中，当它这样做时，组件被删除而没有错误。

任何信息将不胜感激，谢谢！