Обновить данные из ранее вызванного UseEffect после нового вызова API в React Native

Question

Я борюсь с проблемой, которая должна быть довольно простой, однако я не понимаю, как мне нужно соединить части вместе. У меня есть опыт работы с PHP, но я пишу приложение на React Native, и я новичок в этом, поэтому это может объяснить, почему я не могу найти решение.

Я хочу следующее:

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

На основе некоторых руководств я создал «fetchPermit» (мы говорим о разрешениях в этом приложении), который использует перехватчик UseEffect для получения разрешения и возвращает само разрешение

PermitScreen. js

function Permit({route, navigation}) {
    const {permit, loading} = fetchPermit(route.params.id);

fetchPermit. js

export const fetchPermit = (id) => {

    const [state, setState] = useState({permit: null, loading: true});
    const {user, accessToken} = useContext(AuthContext);

    const url = 'https://this.is.the.api.url/api/permit/view/' + id;

    useEffect(() => {
        setState({permit: null, loading: true});
        fetch(url, {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + accessToken
            }
        })
            .then(res => res.json())
            .then(res => {
                setState({permit: res, loading: false})
            })
            .catch(error => {
                console.log("get data error from:" + url + " error:" + error);
            });
    }, [url]);

    return state;
}

Кажется, все работает нормально, я получаю разрешение и см. все подробности.

Я создал кнопку под разрешением в PermitScreen.js, через

<ActivateButton permit={permit}/>

, и эта кнопка имеет следующий код:

export function ActivateButton(data) {

    const {user, accessToken} = useContext(AuthContext);

    function activate(data) {

        const url = 'https://this.is.the.api.url/api/permit/activate/' + data.permit.id;
        fetch(url,
            {
                method: 'PUT',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + accessToken
                }
            })
            .then((response) => response.json())
            .then((res) => {
                setState(res);


            })
            .catch(error => {
                console.log("get data error: " + error);
            });
    }

    return (
        <Button icon="check" mode="contained" color='green' style={{'margin': 15}}
                onPress={() => activate(data)}>
            Activeer
        </Button>
    )
}

Кнопка красиво запускает вызов API, но затем он останавливается, и я не знаю, как я могу использовать ответ функции для обновления самого разрешения в PermitScreen.js.

Я попытался повторно вызвать fetchPermit или найти ссылку sh, но у меня есть создается впечатление, что мне чего-то не хватает.

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