Question

我正在编写一个使用react-sortable-hoc的小应用程序

一切都很好，但是在显示按 order

排序的列表时遇到了问题

我有

user 0
user 1
user 2

当我将用户2拖动到用户0上方时而不是得到

user 2
user 0
user 1

我明白了

user 2
user 1
user 0

我认为这与我在状态中设置订单的方式有关。但我不知道。

这是我在排序结束时设置顺序的方式

const onSortEnd = ({ oldIndex, newIndex }) => {

    setUsers(prevState => {
        const newItems = [...prevState];
        newItems[newIndex].order = oldIndex;
        newItems[oldIndex].order = newIndex;
        return newItems.sort((a, b) => a.order - b.order);
    })
};

这是正在运行的应用，因此您可以使用它。 https://codesandbox.io/s/winter-https-xelrd?fontsize=14&hidenavigation=1&theme=dark

Answer 1

您要做的是交换。

如果只想在新位置中“ 插入”元素，则必须更新两个位置之间的所有项目。

在您的情况下，一种方法是仅移动元素并为所有商品重新创建订单

setUsers(prevState => {
  const newItems = [...prevState];
  newItems.splice(newIndex, 0, newItems.splice(oldIndex, 1)[0]).forEach((item,index)=>{
    item.order = index;
  });

  return newItems
});

演示在https://codesandbox.io/s/confident-river-mrh3p

Answer 2

我已修复它，这是与https://codesandbox.io/s/quizzical-colden-rm62y

一起使用的有效网址

您猜对了，原因是onSortEnd函数。无需交换newIndex和oldIndex位置，我们只需要使它们向上或向下冒泡即可。

这是一个有效的代码，可以对其进行一些清理，但是您知道了：）

const onSortEnd = ({ oldIndex, newIndex }) => {
    setUsers(prevState => {
      const newItems = [...prevState];

      if (oldIndex > newIndex) {
        for (let i = oldIndex - 1; i >= newIndex; i--) {
          newItems[i].order++;
          newItems[oldIndex].order = newIndex;
        }
      } else if (oldIndex < newIndex) {
        for (let i = oldIndex + 1; i <= newIndex; i++) {
          newItems[i].order--;
          newItems[oldIndex].order = newIndex;
        }
      }
      return newItems.sort((a, b) => a.order - b.order);
    });
  };

希望有帮助。编码愉快：）

Answer 3

因此，看起来您的代码只是在交换元素。这似乎不是您真正想要做的。实际上，您确实希望删除该元素并将其插入到给定位置。我认为，既然您已经有了oldIndex和newIndex，则可以按以下方式处理sort函数：

  const onSortEnd = ({ oldIndex, newIndex }) => {
    setUsers(prevState => {
      var newItems = [...prevState];
      let elem = newItems[oldIndex]
      newItems.splice(oldIndex, 1)
      newItems.splice(newIndex, 0, elem)

     return newItems 
    });
  };

真正不需要订单，并且捕获的数量超出了所需的最低状态（除非您在其他地方使用了此状态）。

拖动以重新排序并使用reactjs保存状态

3 个答案: