react-beautiful-dnd：如何在不影响相同类型的已拖动组件的ID的情况下更改新拖动的组件的ID？

Question

我正在尝试在我的应用程序中实现react-beautiful-dnd，以便能够将新组件从侧栏拖动到主区域。 为此，我想到了这个处理程序：

onDragEnd(result) {
  const { destination, source } = result;

  if (!destination) {
    return;
  }

  if (source.droppableId !== destination.droppableId) {
    this.setState(prevState => {
      const newComponent = this.addSectionConfigsHandler(source.droppableId)[
        source.index
      ]; //this filters the components array and returns an object that contains component properties

      let usedComponents = prevState.usedComponents;
      usedComponents.splice(destination.index + 1, 0, newComponent);
      return {
        ...prevState,
        usedComponents
      };
    });
  }
}

在我的状态下，我有两个数组。数组组件包含具有所有可用组件属性的对象列表。数组usedComponents是从components数组中拖到主区域的对象的数组。 组件对象看起来像这样：

{
  id: 1,
  group: "header",
  componentType: "headerLogo",
  //rest of the properties
}

我已将组件对象中的id用作Draggable中的键，并且添加新组件的效果很好，直到我添加了usedComponents数组中已经存在的组件，也就是说是否将同一组件添加两次。然后我得到一个警告：由于相同的ID存在两次，所以遇到了两个具有相同密钥的孩子。

要解决此问题，我尝试在拼接好useComponents之前添加以下代码行，以在处理程序中拖动的组件中设置新的ID：

newComponent.id = prevState.components.length + usedComponents.length;

但是，这会同时更改新拖动的组件的id以及已经在usedComponents数组内部的相同类型的组件。 如何仅更改新拖动的组件的ID，而又不影响usedComponents数组中已经存在的ID？