在 React JS 上重置状态答案

【问题标题】：Reset The State on React JS在 React JS 上重置状态
【发布时间】：2020-02-10 20:07:15
【问题描述】：

假设我有一个名为“NAME”的变量，该变量有一个存储名称，我的状态中也有这个变量，假设该变量存储了“JOSH”

this.state = {
nombre: ' '
}

我在输入值中设置了这个变量，所以当我点击按钮时，将输入值放入变量“NAME”，所以它会在输入“JOSH”中显示我

如果我错误地删除了一个字母或整个字段，使用“UNDO”按钮，我应该恢复更改，所以当输入中有“JOSH”时，删除1个字母（JOS），当我点击按钮UNDO，它应该再次给我带来“JOSH”。

我的疑问是，如何将状态重置为原始值？

我正在考虑类似...：

this.setSate ({name}); 但这里有些事情让我失败了，无法撤消它

【问题讨论】：

不清楚你在问什么；您是否只需要保留一个“撤消”先前值的堆栈（或者如果您不需要多个级别的撤消，则只需要一个值）？
您希望state 在您更改输入字段中的值时进行更改吗？
例如，您可能需要将该特定变量的每个状态更改存储在历史数组中，这样您就可以通过访问数组中的arrayLength - 1 索引值，使用撤消按钮将其恢复。但我只是在这里猜测。

标签： javascript reactjs react-redux state

【解决方案1】：

更新状态时，跟踪所有之前的状态：

 this.state = { name: '', history: [] };

 // whe  adding name:
 this.setState(({ history, name: oldName }) => ({ name, history: [...history, oldName] }));

然后你可以轻松恢复之前的状态：

this.setState(({ history }) => ({ name: history[history.length - 1] || '', history: history.slice(0, -1) }));

【讨论】：