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，则只需使用spread operator

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。

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

2 个答案: