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))

Answer 2

正确地指出，差价运算符不会进行深层复制。因此，对于大型状态，我们需要编写自定义函数。这应该适用于一个简单的状态：

this.baseCoupons=[...this.state.billing.coupons]


this.setState({billing:{coupons:[...this.baseCoupons]}})