componentDidMount не работает при перенаправлении на экран

У меня есть componentDidMount для отображения набора файлов (изображений) на экране A, с этого экрана A у меня есть ссылка на другой экран B, где я могу просмотреть подробный вид файла, и там у меня есть возможность удалить документ.

Когда экран A вызывается с помощью

  <TouchableOpacity style={Styles.HomeButton} onPress={ () => this.props.navigation.navigate('Gallery')}>
     <Text style={Styles.HomeButtonText}>View Photos</Text>
  </TouchableOpacity>

componentDidMount работает нормально, но когда я удаляю файл (я использую react-native-fs) при обратном вызове unlink, я вызываю навигацию, например

this.props.navigation.navigate('Gallery');

Который работает нормально, перенаправляя на экран A, но componentDidMount не работает, что означает, что я все еще вижу этот удаленный файл в списке. то есть экран A не обновляется, есть ли возможное решение?


react-native react-navigation react-lifecycle
person Jothi Kannan    schedule 28.11.2018    source источник
comment
Я думаю, что компонент экрана A никогда не размонтируется, даже если вы перейдете на экран B. Что вы можете сделать, чтобы решить эту проблему, так это добавить весь список файлов, отображаемых на экране A, в состояние. И передача функции обратного вызова в качестве опоры компоненту экрана B, в котором вы обновляете состояние i. е. удалить элемент (файл) из списка файлов. Надеюсь это поможет!!   -  person Goldy    schedule 28.11.2018

Ответы (4)


arrow_upward
6
arrow_downward

В реактивной навигации компонент не будет размонтирован, если вы перейдете к другим экранам, если вы не сбросите стек в навигации по стеку. Поэтому, когда вы вернетесь к предыдущему экрану, поскольку он уже смонтирован, componentDidMount не сработает.

Вы можете связать прослушиватель событий навигации, чтобы вызвать некоторый фрагмент кода, когда вы вернетесь на экран.

this.focusListner = this.props.navigation.addListener("didFocus",() => {
  // Update your data
});

Не забудьте удалить прослушиватели событий, пока вы размонтируете компонент.

componentWillUnmount() {
    // remove event listener
    this.focusListner.remove();
}

person Karthik Dechiraju    schedule 28.11.2018
comment
Отлично, все работает нормально, но componentWillUnmount не работает, когда мы удаляем последний файл в списке, что означает, что я не могу удалить прослушиватель, какое-либо решение для этого? - person Jothi Kannan; 29.11.2018

arrow_upward
1
arrow_downward

Возможная причина, по которой ваш componentDidMount() не работает, заключается в том, что экран B может быть модальным.

В случае с модальными окнами предыдущий компонент не размонтируется, и после него просто открывается следующий экран. Поэтому когда вы возвращаетесь к предыдущему экрану, он снова не монтируется. Вот почему ваш список не обновляется.

Решение

Вы должны изменить состояние компонента, который должен перерисовываться. Лучшим решением здесь, которое я также использую, является библиотека управления состоянием, такая как Redux. Поэтому, когда вы удаляете элемент с экрана B, просто также соответствующим образом обновите хранилище избыточности. Таким образом, каждый компонент, который использует этот редуктор, будет перерендерен, и вы также можете сохранить одно обращение на свой сервер.

person Siraj Alam    schedule 28.11.2018
comment
Точно такой же случай, и я также обновляю избыточность, но все еще не перерисовываю этот компонент. - person ; 18.04.2019

arrow_upward
0
arrow_downward

Вам следует подумать об обновлении списка в событии навигации didFocus. Очевидно, если вы используете навигацию по стеку с A -> B, и как только вы удалите свой файл из B и вернетесь к A, при условии, что A уже находится в стеке, поэтому didMount не будет работать при переходе назад.

Итак, в идеале вы должны обновить свой список в событии didFocus навигации, используя какой-то флаг, установленный в избыточности, когда вы удаляете файл, и как только вы вернетесь к A, вы прочитаете статус флага и соответственно обновите свой список.

Вы можете ссылаться на это чтобы лучше понять реквизиты navigation и события жизненного цикла

person Suraj Malviya    schedule 28.11.2018

arrow_upward
0
arrow_downward

Вы можете проверить API NavigationEvents здесь: https://reactnavigation.org/docs/en/navigation-events.html .

Чтобы решить вашу проблему, вы хотите использовать событие навигации onDidFocus вместо componentDidMount!

Это намного проще, чем использовать императивный API, так как он заботится о подписке и отмене подписки слушателей.

person Hugo Laplace    schedule 28.11.2018