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 работает нормально, но когда я удаляю файл (я использую response-native-fs) при обратном вызове unlink, я вызываю навигацию, например
this.props.navigation.navigate('Gallery');
Которая работает нормально с перенаправлением на экран A, но componentDidMount не работает, что означает, что я все еще вижу этот удаленный файл в списке.
т.е. экран A не обновляется, есть ли возможное решение?
Ответы 4
Possible reason, why your
componentDidMount()is not working, is because screen B may be possible a modal.
В случае модальных окон предыдущий компонент не размонтируется, и только после него открывается следующий экран. Поэтому, когда вы вернетесь к предыдущему экрану, он больше не будет монтироваться. Вот почему ваш список не обновляется.
Solution
Вы должны изменить состояние компонента, который должен быть отрендерен. Лучшее решение, которое я также использую, - это библиотека управления состоянием, такая как Redux. Поэтому, когда вы удаляете элемент с экрана B, просто также соответствующим образом обновите хранилище redux. Таким образом, каждый компонент, использующий этот редуктор, будет повторно визуализирован, и вы также можете сохранить одно обращение к своему серверу.
Точно такой же случай, и я тоже обновляю redux, но все еще не перерисовываю этот компонент.
В режиме реакции-навигации компонент не будет отключен, если вы перейдете на другие экраны, если вы не сбросите стек в навигации по стеку. Поэтому, когда вы вернетесь к предыдущему экрану, поскольку он уже установлен, componentDidMount не сработает.
Вы можете привязать прослушиватель событий навигации для реагирования на запуск некоторого фрагмента кода, когда вы вернетесь на экран.
this.focusListner = this.props.navigation.addListener("didFocus",() => {
// Update your data
});Не забудьте удалить прослушиватели событий при отключении компонента.
componentWillUnmount() {
// remove event listener
this.focusListner.remove();
}Отлично, он работает нормально, но componentWillUnmount не работает, когда мы удаляем последний файл в списке, что означает, что я не могу удалить слушателя, какое решение для этого?
Вам следует подумать об обновлении вашего списка в событии навигации didFocus. Очевидно, если вы используете навигацию по стеку с A -> B, и после того, как вы удалите свой файл из B и вернетесь к A, при условии, что A уже находится в стеке, поэтому didMount не будет работать, когда вы вернетесь.
Итак, в идеале вы должны обновить свой список в событии навигации didFocus, используя какой-то флаг, установленный в redux, когда вы удаляете файл, и как только вы вернетесь к A, вы прочитаете статус флага и обновите свой список соответственно.
Вы можете обратиться к это, чтобы лучше понять свойства navigation и события жизненного цикла
Вы можете проверить API NavigationEvents здесь: https://reactnavigation.org/docs/en/navigation-events.html.
Чтобы решить вашу проблему, вы хотите использовать событие навигации onDidFocus вместо componentDidMount!
Это более простой способ, чем использование императивного API, поскольку он заботится о подписке и отмене подписки на слушателей.
Я думаю, что компонент экрана A никогда не размонтируется, даже если вы перейдете на экран B, что вы можете сделать, чтобы решить эту проблему, - это добавить весь список файлов, отображаемых на экране A, в состояние. И передача функции обратного вызова в качестве опоры компоненту экрана B, в котором вы обновляете состояние i. е. удалить элемент (файл) из списка файлов. Надеюсь это поможет!!