Обновите уже смонтированный экран, когда вы вернетесь к нему

Question

Я создаю приложение с React Native и Redux, и на одном из моих экранов у меня есть переменная состояния, которую я извлекаю из хранилища на componentDidMount(), а затем сразу же сохраняю в локальной переменной состояния для экрана,Итак, мои componentDidMount() и componentDidUpdate() методы выглядят так:

componentDidMount() {
  this.props.getA(); // this sets this.props.A
}

componentDidUpdate(prevProps) {
  if (!prevProps.A && this.props.A){
    this.setState({
      A: this.props.A
    })
  }
}

Проблема:

Если я отойду от этого экрана и затем вернусь назад,this.props.A все еще существует, но this.state.A не существует.Я понимаю, почему это происходит, но мне интересно, как лучше переустанавливать this.state.A каждый раз, когда я возвращаюсь к экрану следующим образом.

Мой вопрос:

Когда экран монтируется, срабатывает componentDidMount().Есть ли какое-либо событие, которое срабатывает при переходе обратно к уже смонтированному компоненту?Я знаю, что мог бы сделать это, создав другую переменную состояния, которую я автоматически переключаю при каждом переходе, или могу вызвать forceUpdate() или что-то еще, но я хочу самое чистое возможное решение.Есть идеи?

Спасибо!

Answer 1

Указанный выше способ декларации не рекомендуется.

Инициализация состояния из реквизита В большинстве случаев это антипаттерн.Не «копируйте реквизиты в состояние». Это создает второй источник правды для ваших данных, который обычно приводит к ошибкам.Лучше всего использовать один источник правды.

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

Пожалуйста, перейдите по этой ссылке https://daveceddia.com/where-initialize-state-react/.

Вы можете просто использовать реквизит непосредственно при переходе к уже смонтированному компоненту.

Answer 2

Предполагая, что вы используете React Navigation 3.0, есть некоторые изменения в поведении Drawer Navigator по сравнению с более ранней версией. Как и в документах React Navigation,

Ранее при использовании ящика-навигатора экраны отключались при неактивен, и когда вы вернетесь к ним, вам нужно будет повторно сделать все дело На вкладках они остаются в памяти, как и следовало ожидать, поэтому как только вы переключаетесь на экран, как только быстрее вернуться туда снова и вы не потеряете свое место в виде прокрутки или чего-либо еще. Ящик сейчас ведет себя так же, но вы можете вернуться к старому поведению, если вы например, введя unmountInactiveRoutes: true в ящик навигационная конфигурация.

Просто добавьте unmountInactiveRoutes: true к параметрам навигации. Вот так

const MainStack = createDrawerNavigator({
  //your routes
}, {
  contentComponent: SideMenu,
  drawerWidth: wp('69%'),
  unmountInactiveRoutes: true
}