Обработка обратного нажатия на React Native в зависимости от состояния компонента

Question

Я пытаюсь настроить событие обратной навигации в моем собственном приложении React. По сути, в теле компонента я визуализирую разные разделы в зависимости от переменной состояния currentSection . Я обнаружил, что значение currentSection внутри функции onBackPress не обновляется и, по-видимому, всегда имеет значение, когда оно было впервые вызвано (во время вызова useEffect).

    const [currentSection, setCurrentSection] = useState<ProviderDetailSections>(ProviderDetailSections.MAIN);

    useEffect(() => {
        BackHandler.addEventListener(
            "hardwareBackPress",
            onBackPress
        );

        return () => BackHandler.removeEventListener(
            "hardwareBackPress",
            onBackPress
        );
    }, []);

    function onBackPress(): boolean {
        console.log(`onBackPress currentSection: ${currentSection}`);
        if (currentSection === ProviderDetailSections.MAIN) {
            return false;
        }
        else {
            setCurrentSection(ProviderDetailSections.MAIN);
            return true;
        }
    }

console.log () внутри onBackPress всегда регистрирует один и тот же раздел (MAIN), независимо от того, какой раздел является текущим. Любая помощь будет принята с благодарностью!

Answer 1

Проверить ответ

const [currentSection, setCurrentSection] = useState<ProviderDetailSections>(ProviderDetailSections.MAIN);

useEffect(() => {
    BackHandler.addEventListener(
        "hardwareBackPress",
        onBackPress
    );

    return () => BackHandler.removeEventListener(
        "hardwareBackPress",
        onBackPress
    );
}, []);

function onBackPress(): boolean {
    console.log(`onBackPress currentSection: ${currentSection}`);
        setCurrentSection(ProviderDetailSections.MAIN);
        return true;
    }
}