reactjs - React，用原始状态覆盖当前状态

Question

我正在使用 React 开发 SPA 中的计费组件。用户可以填写结帐表格，并在付款确认后我想将当前(脏)状态重置为原始(干净)状态。

我在 componentDidMount 中使用类似的东西:

this.baseState = this.state; 

稍后，当我收到付款确认时，我会继续重置状态:

this.setState(this.baseState)

这按预期工作，除了一小部分状态没有重置。

该州的特定部分最初看起来像这样:

this.state = {
        billing: {
            coupons: []
        }
}

这是修改后的:

this.state = {
        billing: {
            coupons: ["coupon1", "coupon2"]
        }
}

但是，当我重置状态时，我希望优惠券是一个空数组，但不知何故数据仍然存在:

coupons: ["coupon1", "coupon2"]

其他所有内容都会相应地被覆盖，只有这部分仍然存在。我错过了什么？

Answer 1

因为 this.baseState 将具有状态值的引用，这意味着 this.state 和 this.baseState 将指向相同的数据。

一种解决方案是将状态值放入一个函数中，并在需要初始值时调用该函数。

像这样:

constructor(){
    super();
    this.state = this.getInitialState()
}

getInitialState(){
    return {
        key: value
    }
}

现在，当您想要重置状态时，请调用该函数并获取初始状态值。

this.setState(this.getInitialState())

如果您想将状态值存储在变量中，则深度克隆它，如下所示(深度克隆的一种可能方法):

this.baseState = JSON.parse(JSON.stringify(this.state))