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

【问题标题】：How to drag and drop element if only item do not exist in Array - React DND ES6如果数组中只有项目不存在，如何拖放元素 - React DND ES6
【发布时间】：2020-08-17 20:29:13
【问题描述】：

我正在从事一个涉及 React DND ES6 的项目。我想从 lest 面板中拖动元素并将它们放在右侧的相应框中。

我通过将元素从左侧面板中拖动并实现到数组中来完成此操作。但是这里的问题是同一个项目可以添加到数组中，如下所示。

我想让它这样如果项目已经被拖到一个特定的框，从左侧面板再次拖动该项目并放入正确的框应该不起作用。在这种情况下，它应该显示警告框，上面写着“Item _name”已被拖到“box_name”。

我尝试在 setBins 方法之前添加以下代码来实现这一点。但是没有成功。

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

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

请帮忙。谢谢。

【问题讨论】：

请问您可以在codesandbox中设置您的代码吗？这将很容易帮助提供解决方案。
@ChamaniShiranthika 请检查我创建的sandbox。它现在不允许重复。你可以在那里查看alert和console logs。
谢谢@Ajeet Shah，但是当一个项目被拖放两次到任何垃圾箱时，警报就会出现。我希望它只是拖放到 SAME bin 时。这意味着最初拖放到Bin 1的项目在再次放入时被Bin 1拒绝，但它应该能够放入另一个bin，例如Bin 2。
@ChamaniShiranthika 检查this。为每个 bin 添加了一个新属性 droppedItems。我希望它对你有用。
@AjeetShah 非常感谢。这很清楚，这正是我想要的。我现在明白了。感谢您的考虑。

标签： reactjs react-native ecmascript-6 react-dnd

【解决方案1】：

您可以再拥有一个属性 - droppedItems 用于存放到目前为止所有已丢弃物品的每个 bin，例如：

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

并检查该项目是否已经在 bin 中：

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]
);

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

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

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

【讨论】：