如何解决离开页面时如何重置状态
我有一个地图,当我点击一个标记时会触发一个模态。模态是可触摸的,可导航到另一个页面。当页面被关闭并且用户返回主页时(在这种情况下),触摸另一个标记并触发新的模式是不可能的。知道我应该如何设置它以便在导航回家时重置它吗?下面的一些代码:
我的功能组件中设置状态的常量:
const [modalVisible,setModalVisible] = useState(false);
const [selectedMarker,setSelectedMarker] = useState(false);
const markerPressed = (marker) => {
setModalVisible(true);
setSelectedMarker(marker);
};
const markerLink = (selectedMarker) => {
setModalVisible(false);
onPressListingItem(selectedMarker);
};
带参数触发模态的标记:
<CustomMarker
onPress={() => {
markerPressed(listing);
}}
/>
带参数的模态导航到页面:
<Modal
style={{ position: 'absolute',bottom: 10 }}
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
setModalVisiblity={() => {
setModalVisible((preState) => (preState = !preState));
}}>
解决方法
解决方案 1:您可以在 MarkerPressed 函数中在触发 Modal 的同一位置重置数据。这样,当您返回时,数据将被重置。
解决方案 2:如果您使用的是 react-navigation,您可以添加一个焦点侦听器来检查您的 mp 页面何时重新获得焦点。
navigation.addListener('focus',() => {
// reset marker state
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。