React js 拖放

Question

我有2个列表（左和右），所以我只想将项目的列表从左移到右列表，所以，我的左列表是：

const data = [
  { name: "Item A 1", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item B 2", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item C 3", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item D 4", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item E 5", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item F 6", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item G 7", checked: false, array: ['value 1', 'value 2']  },
  { name: "Item H 8", checked: false, array: ['value 1', 'value 2']  },
]

所以，当它运行时，我有类似的东西：

所以我遇到的问题是，当我将列表左侧的任何项目移动到列表右侧时，列表右侧不会获取数据：

我遇到了这个问题：

我正在检查，但我不知道这是错误的，所以，出了什么问题？我该怎么做才能正确获取 mi 列表上的对象？？？

我在 codesandbox.io

上有代码

Answer 1

我们开始：codepen

我改变了：

const newLeftItems =
  source === "left"
    ? leftItems.filter((x) => x.name !== items.name)
    : leftItems.concat(items);
const newRightItems =
  source === "left"
    ? rightItems.concat(items)
    : rightItems.filter((x) => x.name !== items.name);

还有

  if (dropResult) {
    props.addItemsToCart(props, item.source, dropResult);
    props.clearItemSelection();
  }