Реагировать Nate refre sh контент, когда пользователь нажимает кнопку назад - с помощью хуков

Question

Я хотел бы обновить sh данные, когда пользователь возвращается с одной страницы на другую. Вот как теперь выглядит моя функция useEffect:

useEffect(() => {
    setIsLoading(true);

    AsyncStorage.getItem("user").then((response) => {
        const currentData = JSON.parse(response);
        setUser(currentData)
        fetch('URL',
            {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: currentData.id
                }),
            }
        )
            .then(response => response.json())
            .then(data => {
                 setNotis(data.notifications);
                 setIsLoading(false)
            })
            .catch(error => {
            });
    });
}, []);

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

Спасибо

Answer 1

Настоящая проблема здесь в том, что экран не отключается при навигации за его пределами, поэтому крюк не срабатывает, так как компонент уже смонтирован. Существует несколько вариантов решения этой проблемы, например, добавление слушателя, когда экран становится размытым или размытым, или просто следите за изменениями для navigation пропеллера. Для последнего обходного пути вы можете попробовать что-то вроде:

useEffect(() => {
    setIsLoading(true);

    AsyncStorage.getItem("user").then((response) => {
        const currentData = JSON.parse(response);
        setUser(currentData)
        fetch('URL',
            {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    user_id: currentData.id
                }),
            }
        )
            .then(response => response.json())
            .then(data => {
                 setNotis(data.notifications);
                 setIsLoading(false)
            })
            .catch(error => {
            });
    });
}, [navigation]);

Для просмотра события onFocus вы можете импортировать NavigationEvents из react-navigation и переместить логи c для ловушки внутри функции refreshData

import {NavigationEvents} from 'react-navigation`
...

<NavigationEvents onWillFocus={refreshData}/>

Кроме того, вы должны устанавливать для состояния isLoading значение false, когда обещание выполнено, например, вы можете использовать

.finally(() => {
  setIsLoading(false)
})