清除状态es6 R

我正在尝试清除组件this.replaceState(this.getInitialState());,但找不到es6语法的引用。 我正在使用:

this.replaceState(this.getInitialState());

但是,这不适用于es6类语法。

我将如何获得相同的结果?

Guy asked 2020-01-12T23:27:08Z
11个解决方案
83 votes

据我所知,React组件不会保留初始状态的副本,因此您只需要自己做即可。

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

请注意,第this.state = initialState;行要求您绝不要更改状态,否则您将污染setState()并无法进行重置。 如果无法避免突变,则需要在构造函数中创建replaceState()的副本。 (或根据getInitialState()使initialState为函数。)

最后,建议您使用setState(),而不要使用replaceState()

David L. Walsh answered 2020-01-12T23:27:27Z
43 votes

问题

接受的答案:

const initialState = {
    /* etc */
};

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = initialState;
    }
    reset() {
        this.setState(initialState);
    }
    /* etc */
}

不幸的是不正确。

initialState被传递为对state的引用,因此,每当您更改state时,您也会更改initialState(在这里const并不重要)。 结果是您永远无法回到initialState

您必须将initialState深复制到state,然后它才能工作。 您可以自己编写一个深层复制功能,也可以使用这样的现有模块。

RaptoX answered 2020-01-12T23:28:09Z
25 votes

这是作为功能实现的解决方案:

Class MyComponent extends React.Component {
   constructor(props) {
      super(props);
      this.state = this.getInitialState();
   }

   getInitialState = () => {
     const initialState = {
        /* state props */
     };
     return initialState;
 }

  resetState = () => {
     this.setState(this.getInitialState());
  }
}
Eruz Apodaca answered 2020-01-12T23:28:29Z
14 votes

在React 16中,涉及直接设置this.state的解决方案不适用于我,因此这是我重置每个密钥的方法:

  const initialState = { example: 'example' }
  ...
  constructor() {
      super()
      this.state = initialState
  }
  ...
  reset() {
    const keys = Object.keys(this.state)
    const stateReset = keys.reduce((acc, v) => ({ ...acc, [v]: undefined }), {})
    this.setState({ ...stateReset, ...initialState })
  }
Charles Offenbacher answered 2020-01-12T23:28:49Z
5 votes

首先,在组件生命周期中使用componentWillMount()函数时,您需要存储初始状态:

componentWillMount() {
    this.initialState = this.state
}

这将存储您的初始状态,并可在需要时通过调用来重置状态

this.setState(this.initialState)
Balanced02 answered 2020-01-12T23:29:13Z
5 votes
const initialState = {
    a: '',
    b: '',
    c: ''
};

class ExampleComponent extends Component {
    state = { ...initialState } // use spread operator to avoid mutation
    handleReset = this.handleReset.bind(this);

    handleReset() {
         this.setState(initialState);
    }
 }

请记住,为了能够重置状态,重要的是不要更改initialState。

state = {...initialState} // GOOD 
// => state points to a new obj in memory which has the values of initialState

state = initialState // BAD 
// => they point to the same obj in memory

最方便的方法是使用ES6 Spread Operator。 但您也可以改用Object.assign。 他们都将实现相同的目标。

state = Object.assign({}, initialState); // GOOD
state = {...initialState}; // GOOD
uke5tar answered 2020-01-12T23:29:38Z
3 votes

我将添加到上述答案中,复位功能也应分配状态,如下所示:

reset() {
  this.state = initialState;
  this.setState(initialState);
}

原因是,如果您的状态选择的属性不处于初始状态,则不会清除该键/值,因为setState只会更新现有键。 分配不足以使组件重新呈现,因此还请包含setState调用-您甚至可以在分配后使用this.setState({})。

Brian Loughnane answered 2020-01-12T23:30:03Z
2 votes

这是我的处理方式:

class MyComponent extends React.Component{
  constructor(props){
    super(props);
    this._initState = {
        a: 1,
        b: 2
      }
    this.state = this._initState;
  }

  _resetState(){
     this.setState(this._initState);
   }
}

更新:其实这是错误的。 对于将来的读者,请参阅@RaptoX答案。另外,您可以使用不可变库,以防止由引用分配引起的怪异状态修改。

eveevans answered 2020-01-12T23:30:27Z
1 votes

在大多数情况下,您不需要深层副本,很少是对象的初始状态,因此,使用将babel转换为对象的散布运算符即可。assign应该很好。

因此,在构造函数内部您将拥有:

    class MyComponent extends Component {
        constructor(props) {
            super(props)
            this.state = {
                key: value,
                key2: value
            }
            this.initialState = { ...this.state } 
        }
    }

从那里你可以使用

this.setState(this.initialState);

重置。 但是,如果由于某种原因您的初始状态是更复杂的对象,请使用一些库。

Goran Jakovljevic answered 2020-01-12T23:31:01Z
0 votes

在某些情况下,仅将state的所有值设置为null就足够了。

如果您的状态是以这种方式更新的,从而您不知道其中可能包含什么,则可能要使用

this.setState(Object.assign(...Object.keys(this.state).map(k => ({[k]: null}))))

它将改变状态如下

{foo: 1, bar: 2, spam: "whatever"} > {foo: null, bar: null, spam: null}

并非在所有情况下都是解决方案,但对我来说效果很好。

SColvin answered 2020-01-12T23:31:34Z
-1 votes
class x extends Components {
constructor() {
 super();
 this.state = {

  name: 'mark',
  age: 32,
  isAdmin: true,
  hits: 0,

  // since this.state is an object
  // simply add a method..

  resetSelectively() {
         //i don't want to reset both name and age
    // THIS IS FOR TRANSPARENCY. You don't need to code for name and age
    // it will assume the values in default..
    // this.name = this.name;   //which means the current state.
    // this.age = this.age;


    // do reset isAdmin and hits(suppose this.state.hits is 100 now)

    isAdmin = false;
    hits = 0;
  }// resetSelectively..

}//constructor..

/* now from any function i can just call */
myfunction() {
  /**
   * this function code..
   */
   resetValues();

}// myfunction..

resetValues() {
  this.state.resetSelectively();
}//resetValues

/////
//finally you can reset the values in constructor selectively at any point

...rest of the class..

}//class
sarathantony answered 2020-01-12T23:31:49Z
translate from https://stackoverflow.com:/questions/34845650/clearing-state-es6-react