如何解决即使使用清理功能,React 本机深层链接不需要的组件也会呈现
我的深层链接句柄 URL 存在问题,这是我的组件在 URL 到达我的应用程序后多次呈现。换句话说,假设浏览器在客户端选择所需的会话时间(由状态处理)后打开购买操作,并且在客户端决定购买或取消后,应用程序打开以显示结果,但它会多次执行.
这是组件的一部分:
const bookingHandler = () => {
if(selected == null) {
Alert.alert('Invalid Selection','Please select one of the sessions!')
return;
}
Linking.openURL('http://www.medicalbookingapp.cloudsite.ir/sendPay.PHP');
}
selectedTimeIndex = therapists.meetingPlans[selectedplanIndex].times.findindex((el) => el.time == selected.title);
useEffect(() => {
Linking.addEventListener('url',(e) => handleOpenUrl(e.url))
return () => {
Linking.removeEventListener('url',(e) => handleOpenUrl(e.url));
console.log('event removed')
}
});
const handleOpenUrl = (url) => {
const route = url.replace(/.*?:\/\/\w*:\w*\/\W/g,'') // exp://myapplication.... --> ''
const id = route.split('=')[1]
if(id == 1) {
dispatch(
BookingActions.addBooking(
therapistId,therapistFirstName,therapistLastName,selected.title,moment(selectedDate).format("YYYY-MMM-DD"),selected.slots,)
);
dispatch(
doctorActions.updateTherapists(therapistId,selectedDate,selectedplanIndex,selectedTimeIndex)
);
setBookingConfirm(true)
toggleModal();
} else if(id == 0) {
console.log('purchase Failed...');
toggleModal();
}
}
我在 useEffect
钩子内处理我的监听器,它还有清理功能。但在控制台中我收到此错误:
Can't perform a React state update on an unmounted component. This is a no-op,but it indicates a memory leak in your application. To fix,cancel all subscriptions and asynchronous tasks in %s.%s,a useEffect cleanup function.
我还注意到了一些其他的东西,为了抓住问题,你可以看到组件屏幕,会话选择部分是用 state
处理的。呈现 useEffect
钩子的数量与选择会话状态的更改数量有某种关系。 (我的意思是如果我在选择会话中弹跳,它会呈现更多)
如果您需要更多信息,请在评论中告诉我。 任何帮助将不胜感激。
解决方法
一个可能的问题是您可能会创建两个处理程序,一个在 addListener 中,另一个在 removeListener 中。
你能不能试试:
const handler = (e) => handleOpenUrl(e.url);
Linking.addEventListener('url',handler);
return () => {
Linking.removeEventListener('url',handler);
console.log('event removed')
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。