response-beautiful-dnd: как изменить идентификатор недавно перетаскиваемого компонента, не затрагивая идентификатор уже перетаскиваемого компонента того же типа? - PullRequest
Новая
       13

response-beautiful-dnd: как изменить идентификатор недавно перетаскиваемого компонента, не затрагивая идентификатор уже перетаскиваемого компонента того же типа?

0 голосов
/ 30 июня 2019

Я пытаюсь реализовать в своем приложении response-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
      };
    });
  }
}

В моем состоянии у меня есть два массива.Компоненты массива содержат список объектов со свойствами всех доступных компонентов.Array usedComponents - это массив объектов из массива компонентов, которые были перетащены в основную область.Компонентные объекты выглядят примерно так: 

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

Я использовал идентификаторы из объектов компонентов в качестве ключа в Draggable, и добавление новых компонентов работает нормально, пока я не добавлю компонент, который уже находится в массиве usedComponents, чтоэто сказать, если один и тот же компонент добавляется дважды.Затем я получаю предупреждение: обнаружил двух детей с одним и тем же ключом, потому что один и тот же идентификатор существует дважды.

Чтобы исправить это, я попытался установить новый идентификатор для перетаскиваемого компонента внутри моего обработчика, добавив эту строку кода прямоперед тем, как склеить usedComponents: 

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

Но это изменяет как идентификатор недавно перетаскиваемого компонента, так и компонент того же типа, который уже находится в массиве usedComponents.Как изменить идентификатор только для перетаскиваемого компонента, не затрагивая тот, который уже находится в массиве usedComponents?

...