我有一个 React Native 屏幕/组件,其中导航/标题的左上角有一个菜单按钮。当点击该按钮时,我想在屏幕/组件本身中创建一个菜单,切换打开和关闭。
无论出于何种原因,按照我现在的设置方式,第一次点击菜单按钮时,菜单会打开,但之后,无论我点击多少次,它始终保持打开状态并且不会关闭点击按钮。状态似乎没有正确更新或其他什么。
这是我用于菜单切换的基本代码:
const Screen = ({ navigation }) => {
const [showMenu, setShowMenu] = useState(false);
useEffect(() => {
navigation.setParams({
toggleMenu: () => {
setShowMenu(!showMenu);
}
});
}, []);
return (
<View>
{ showMenu &&
<FlatList
// Menu code here.
/>
}
{/* Other screen rendering here. */}
</View>
);
};
Screen.navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
return {
headerLeft: () => {
return (
<TouchableOpacity
onPress={params.toggleMenu}
>
<Text>Menu</Text>
</TouchableOpacity>
);
}
};
};
export default Screen;
我认为这可能是一些关闭问题,但我真的不确定。我向 toggleMenu
添加了 console.log
,当我进入该函数时,showMenu
值始终为 false
,然后将其设置为 true
,因此菜单不会关闭。
为什么 showMenu
值始终为 false
,即使在我使用 setShowMenu
将其设置为 true
后也是如此但超出了我的范围。有人有主意吗?谢谢。
最佳答案
您的 useEffect
中有一个陈旧的闭包。这是人们在使用 Hook 时遇到的最常见问题之一。将其更改为使用更新程序表单,它应该开始工作。
setShowMenu(prevVal => !prevVal);
showMenu
基本上停留在 useEffect
内的初始值,因此每次调用更新时它都会执行 setShowMenu(!false)
。这就是为什么它第一次看起来有效。
更新程序表单保证您将使用最新的状态副本。
关于javascript - 当我点击 navigationOptions 中的按钮时,为什么没有正确设置 React Native 状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60747165/