反应:从变量分配初始状态，会导致变量值在执行 setstate 时发生突变

Question

例如：

const initialState = {
a=4
}
constructor(props) {
super(props);
this.state = initialState
}

在代码下方的某个地方，

this.setState({a:9});

现在，每当加载此组件时，它始终保留以前的值，即 9 作为其初始状态，并且不会恢复到 A=4。我做错了吗？如何不改变我的原始变量？

Answer 1

首先有语法错误：应该是这样的

const initialState = {
a: 4
}

如果您不想改变initialState，则需要创建initialState对象的副本。 如果使用 ES6，则只需使用点差运算符

constructor(props) {
super(props);
this.state = {...initialState}
}

如果不使用 ES6，则可以只使用 object.assign

constructor(props) {
super(props);
this.state = Object.assign({}, initialState);
}

Answer 2

首先，您需要承担应用程序的状态是应用程序的驱动实体。最重要的是何时执行 setState 调用？应根据应用程序上预期的特定事件调用 setState 调用。应根据某些行为更改或更新应用程序的状态。更改点击事件的状态并尝试，您将获得预期的行为。

class Demo extends React.Component{
constructor (props){
super(props);
this.state={
a:4
}
}
render(){
return (){
<div>
<button onClick={this.handleClick}>Click</button>
{this.state.a}
</div>
}
handleClick(){
this.setState({a:9});
}
}

使用此组件来呈现和检查状态。确保你没有在 componentDidMount 方法中调用 setState。