如果数组中只有项目不存在，如何拖放元素 - 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],   )

请在此处的 codesandbox 中找到我的代码：- https://codesandbox.io/s/reactdndapp-2vz82

请帮忙。谢谢。

Answer 1

你可以再给一个属性 - 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]
);

希望对您有所帮助！

Answer 2

如果要删除的对象实例存在于容器中，则需要在调用setBin方法更新之前先搜索数组，否则可以忽略或触发通知。

这里我使用了javascript数组find的方法来检测bin中是否存在相似的对象

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

如果数组中只有项目不存在，如何拖放元素 - React DND ES6

How to drag and drop element if only item do not exist in Array - React DND ES6

reactjs

react-native

ecmascript-6

react-dnd