Как перетащить элемент, если в Array не существует только элемента - React DND ES6

Question

Я работаю над проектом, который включает React DND ES6. Я хочу перетащить элементы из последней панели и поместить их в соответствующие поля справа.

Я сделал это, перетащив элемент из левой панели и внедрив его в массив. Но проблема здесь в том, что тот же элемент может быть добавлен в массив следующим образом.

Я хочу сделать так, чтобы, если элемент уже перетащен в определенное поле, снова перетащите этот элемент с левой панели и отпустите в правильной коробке не должно работать. В такой ситуации должно отображаться окно с предупреждением, например, «Item_name» уже перетащено в «box_name».

Я пытался добиться добавления следующего кода перед методом setBins. Но не удалось.

 if (!lastDroppedItem.includes(item)){  setBins(
         update(bins, {
          [index]: {
            lastDroppedItem: {
                          $push: [item],   
            },
          },
        })       
      )
    },
    [droppedBoxNames , bins],   )

Пожалуйста, найдите мои коды в codeandbox здесь: - https://codesandbox.io/s/reactdndapp-2vz82

Пожалуйста, помогите. Спасибо.

Answer 1

Вам нужно выполнить поиск в массиве, если экземпляр объекта, который вы собираетесь отбросить, существует в корзине, прежде чем обновлять его, вызвав метод setBin, в противном случае вы можете проигнорировать или вызвать уведомление.

Здесь я использовал метод javascript array find, чтобы проверить, существует ли подобный объект в корзине.

if (!bins[index].lastDroppedItem.find(x => x.name === item.name)) {
    setBins(
        update(bins, {
            [index]: {
              lastDroppedItem: {
                $push: [item]
              }
            }
        })
    );
}

Answer 2

Вы можете иметь еще одно свойство - droppedItems для каждой корзины, в которой хранятся все выпавшие предметы, например:

{
  dname: 'BIN 1',
  accepts: [ItemTypes.BOOK, ItemTypes.BOTTLE, ItemTypes.FOOD],
  lastDroppedItem: {},
  droppedItems: [],
},

И проверить, находится ли элемент в корзине:

function isBoxAlreadyInBin(bins, index, name) {
  const droppedItems = bins[index].droppedItems || [];
  return droppedItems.some(item => item.name === name);
}

const handleDrop = useCallback(
(index, item) => {
  const { name } = item;

  setDroppedBoxNames(
    update(droppedBoxNames, name ? { $push: [name] } : { $push: [] })
  );

  if (isBoxAlreadyInBin(bins, index, name)) {
    alert(`${name} already in bin ${index}`);
  } else {
    setBins(
      update(bins, {
        [index]: {
          lastDroppedItem: {
            $set: item
          },
          droppedItems: {
            $push: [item]
          }
        }
      })
    );
  }
},
[droppedBoxNames, bins]
);

Надеюсь, это поможет!