问题

Question

我正在尝试清除组件state，但无法找到es6语法的参考。我正在使用：

this.replaceState(this.getInitialState());

然而，这不适用于es6类语法。

我如何获得相同的结果？

Answer 1

据我所知，React组件不会保留初始状态的副本，因此您只需自己完成。

const initialState = {
    /* etc */
};

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

请注意，this.state = initialState;行要求您永远不要改变您的状态，否则您将污染initialState并无法重置。如果您无法避免突变，那么您需要在构造函数中创建initialState的副本。（或按initialState getInitialState()使setState()成为一个函数。）

最后，我建议您使用replaceState()而不是{{1}}。

Answer 2

问题

接受的答案：

const initialState = {
    /* etc */
};

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

不幸的是不正确。

initialState作为对this.state的引用传递，因此每当您更改state时，您也会更改initialState（ const 并不是真的这里的问题）。结果是你永远不能回到initialState。

解决方案

您必须深层复制 initialState到state，然后才能运作。要么自己编写深层复制函数，要么使用像this这样的现有模块。

Answer 3

这是作为函数实现的解决方案：

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());
  }
}

Answer 4

涉及直接设置this.state的解决方案在React 16中对我不起作用，所以这是重置每个键所做的：

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

Answer 5

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

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

这将存储您的初始状态，并可用于在需要时通过调用

重置状态

this.setState(this.initialState)

Answer 6

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

Answer 7

我将在上面的回答中补充说，复位功能也应该像这样分配状态：

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

原因是如果您的州选择了一个不处于初始状态的属性，则该键/值不会被清除，因为setState只是更新现有密钥。赋值不足以让组件重新渲染，所以也包括setState调用 - 你甚至可以在赋值后使用this.setState（{}）。

Answer 8

这就是我处理它的方式：

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答案。此外，您可以使用不可变库来防止由引用分配引起的奇怪的状态修改。

Answer 9

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

因此，在构造函数内部您将拥有：

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

从那里可以使用

this.setState(this.initialState);

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

Answer 10

在某些情况下，仅将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}

不是所有情况下的解决方案，但对我来说效果很好。

Answer 11

您可以克隆状态对象，遍历每个对象，并将其设置为NOT NULL。但是，这种方法不如公认的答案好。

ModelA

Answer 12

使用深拷贝，你可以用 lodash:

import _ from "lodash";

const INITIAL_STATE = {};

constructor(props) {
    super(props);
    this.state = _.cloneDeep(INITIAL_STATE);
}

reset() {
    this.setState(_.cloneDeep(INITIAL_STATE));
}

Answer 13

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

清除状态es6 React

13 个答案:

问题

解决方案