如何在React + Typescript中将状态更新为之前的状态

Question

我想将状态设置为其先前的值。我有一个复选框列表，基于它的选择，然后单击“应用”以显示/隐藏表中的列。我能够实现此功能。但是，单击“取消”后，我无法将其设置为以前的状态。

CodeSandbox：https://codesandbox.io/s/funny-browser-2z3s5

在单击“取消”时，应将复选框设置为以前的状态。

使用SelectComponent.tsx中的函数处理单击，目标是将optionsArr重置为其原始值：

cancelSelection = (event: any) => {
  this.setState({ showList: false });
  this.setState((prevState: any) => ({
    // Isn't working
    optionsArr: prevState.optionsArr
  }));
};

Answer 1

setState updater得到的参数是应用更改时的状态。将状态设置为等于该值不会改变。

您需要单独跟踪以前的状态。例如，作为状态中的单独项，实例变量或props。参见例如：

Reset initial state in React + ES6

Clearing state es6 React