手柄后按反应本机取决于组件状态

Question

我正在尝试在我的反应本机应用程序上自定义后退导航事件。 基本上，在组件的主体中，我根据当前部分状态变量渲染不同的部分。我发现onBackPress函数中的currentSection值不会更新，并且显然总是具有首次调用时的值(在 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;
}
}

onBackPress中的 console.log(( 始终记录相同的部分 (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;
}
}

Answer 2

我刚刚遇到了同样的问题 - 它的根源是这样一个事实，即您的useEffect()函数在呈现组件时仅调用一次，我认为然后为具有默认值的组件创建 eventListeners，这意味着您的currentSection始终具有 BackHandler 函数的默认值。您要做的是将currentSection添加到useEffect()中的依赖项数组中。

const [currentSection, setCurrentSection] = useState<ProviderDetailSections>(ProviderDetailSections.MAIN);
useEffect(() => {
BackHandler.addEventListener(
"hardwareBackPress",
onBackPress
);
return () => BackHandler.removeEventListener(
"hardwareBackPress",
onBackPress
);
}, [currentSection]);
function onBackPress(): boolean {
console.log(`onBackPress currentSection: ${currentSection}`);
if (currentSection === ProviderDetailSections.MAIN) {
return false;
}
else {
setCurrentSection(ProviderDetailSections.MAIN);
return true;
}
}