Сохранить состояние реагирующего компонента при размонтировании

Question

Реагируйте на новичка здесь: я заметил, что состояние компонента очищается при размонтировании. есть ли способ предотвратить это? это использует избыточный?

Answer 1

У вас есть множество вариантов. Вы можете использовать инструмент управления состоянием, например redux , context API и т. Д., Или передать обратный вызов родительскому компоненту и вызвать его на childComponentWillUnmount как это:

ParentComponent.jsx:

childComponentWillUnmount = (data) => {
 console.log('my data', data);
}

render(){
  return <div>
    <Child componentUnmountCallback={this.childComponentWillUnmount()}/>
  <div>
}
<div>

Child.jsx

...

componentWillUnmount() {
   this.props.childComponentWillUnmount(this.state);

}

...

Answer 2

Как вы говорите, когда компонент размонтирован, вы не можете получить доступ к состоянию. И это так, потому что жизненный цикл компонента.

Что вы можете сделать, это попытаться сохранить состояние компонента, для которого был создан экземпляр, во время его монтирования и при каждом обновлении.

• Вы можете использовать хранилище и использовать простой JavaScript.
• Вы можете иметь состояние в родительском или другом экземпляре ancester.

• Вы можете иметь состояние в хранилище приставок . Обратите внимание, что ваш компонент будет получать переменные как реквизиты, поэтому это не будет правильно сказано.

  Вы можете использовать redux , чтобы управлять состоянием и значениями состояний во времени. Я рекомендую вам redux-devtools-extension , а также эту статью об этом.