【问题标题】：React react-sortable-hoc cancel reordering(Undo order changes)React react-sortable-hoc 取消重新排序（撤消订单更改）
【发布时间】：2021-08-28 20:27:19
【问题描述】：

我正在使用react-sortable-hoc 使用“保存”和“取消”按钮对表格行重新排序。但是，在重新排序行后单击“取消”按钮时，我找不到任何有关恢复原始顺序的信息或示例。

在official documentation 或其他任何地方都找不到任何信息或示例。对我来说，没有内置取消功能似乎很奇怪，还是我遗漏了什么？

编辑： Example code

【问题讨论】：

您能否更新您的问题以包含Minimal, Complete, and Reproducible Code Example？这样我们就可以看到您的代码在做什么。
对那个模块不太熟悉，但通常的做法是存储一个恢复点的深层副本
@DrewReese 添加了一个示例代码 :)

标签： javascript reactjs react-sortable-hoc

【解决方案1】：

如果您想撤消顺序更改，那么您可以维护一个撤消堆栈。每次订单更改完成时，存储之前data 状态的副本。单击撤消按钮时，您会从撤消堆栈中弹回data 状态。

在状态中添加undoStack。

state = {
  data: range(1, 5).map((el) => ({
    name: `tester-${el}`,
    age: el,
    class: `Class-${el}`
  })),
  undoStack: [],
};

在撤消堆栈中缓存先前的data 状态。在这里，我使用 slice 仅保留最后 10 个修订，但这可以调整以满足您的需求。

_handleSort = ({ oldIndex, newIndex }) => {
  this.setState((prevState) => ({
    data: arrayMove(prevState.data, oldIndex, newIndex),
    undoStack: [...prevState.undoStack, prevState.data].slice(-10),
  }));
};

处理撤消顺序更改并将撤消处理程序附加到按钮的onClick 事件处理程序。

undo = () => {
  this.setState(prevState => {
    if (prevState.undoStack.length) {
      return {
        data: prevState.undoStack.pop(),
        undoStack: prevState.undoStack,
      };
    } else {
      return prevState;
    }
  })
};

...

<button type="button" onClick={this.undo}>
  Undo reorder
</button>

演示

如果您不关心中间版本并且只想重置为原始订单，那么只需捕获原始订单的缓存并重置data。

const data = range(1, 5).map((el) => ({
  name: `tester-${el}`,
  age: el,
  class: `Class-${el}`
}));

class App extends React.Component {
  state = {
    data,
    originalData: data, // <-- store cache of original data
    undoStack: []
  };

  ...

  <button
    type="button"
    onClick={() => {
      this.setState({
        data: this.state.originalData // <-- restore from cache
      });
    }}
  >
    Reset
  </button>

两者都在链接的代码框中实现。

【讨论】：

谢谢@Drew Reese！正是我想要的！
@Ohsik 太棒了！很高兴这适合您的需求。干杯，祝你好运。