Ответ 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 и сделать reset невозможным. Если вы не можете избежать мутаций, вам нужно создать копию initialState в конструкторе. (Или сделайте initialState функцию, согласно getInitialState().)

Наконец, я бы рекомендовал использовать setState(), а не replaceState().

Ответ 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.

Ответ 3

Я добавлю к вышеуказанному ответу, что функция reset также должна назначать такое состояние:

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

Причина в том, что если ваше государство получает свойство, которое не было в исходном состоянии, этот ключ/значение не будет очищен, так как setState просто обновляет существующие ключи. Назначение недостаточно для того, чтобы компонент смог повторно выполнить рендеринг, поэтому включите также вызов setState - вы можете даже уйти с this.setState({}) после назначения.

Ответ 4

Вот как я справляюсь с этим:

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

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

Ответ 5

Это решение реализовано как функция:

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

Ответ 6

Сначала вам нужно сохранить исходное состояние при использовании функции componentWillMount() из жизненного цикла компонента:

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

Это сохраняет ваше начальное состояние и может использоваться для reset состояния, когда вам нужно, вызывая

this.setState(this.initialState)

Ответ 7

Решения, связанные с настройкой this.state напрямую, не работают для меня в React 16, поэтому вот что я сделал с reset каждым ключом:

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