我正在使用 React 开发 SPA 中的计费组件。用户可以填写结帐表格,并在付款确认后我想将当前(脏)状态重置为原始(干净)状态。
我在 componentDidMount 中使用类似的东西:
this.baseState = this.state;
稍后,当我收到付款确认时,我会继续重置状态:
this.setState(this.baseState)
这按预期工作,除了一小部分状态没有重置。
该州的特定部分最初看起来像这样:
this.state = {
billing: {
coupons: []
}
}
这是修改后的:
this.state = {
billing: {
coupons: ["coupon1", "coupon2"]
}
}
但是,当我重置状态时,我希望优惠券是一个空数组,但不知何故数据仍然存在:
coupons: ["coupon1", "coupon2"]
其他所有内容都会相应地被覆盖,只有这部分仍然存在。我错过了什么?
最佳答案
因为 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))
关于reactjs - React,用原始状态覆盖当前状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49912162/