即使具有清理功能，React Native 深度链接不需要的组件也会呈现

Question

我的深层链接句柄 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, selected.slots, selectedDate, selected.title, 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.

我还注意到了一些其他的东西，为了抓住问题你可以看到组件屏幕，并且会话 select 部分是用 state 处理的。呈现 useEffect 挂钩的数量与 select 会话状态的更改数量有某种关系。（我的意思是，如果我在 select 会话中反弹，它会渲染更多）

如果您需要更多信息，请在评论中告诉我。任何帮助将不胜感激。

Answer 1

一个可能的问题是您可能创建了两个处理程序，一个在 addListener 中，另一个在 removeListener 中。

你能试试吗：

const handler = (e) => handleOpenUrl(e.url);
Linking.addEventListener('url', handler);

return () => {
   Linking.removeEventListener('url', handler);
   console.log('event removed')
}

即使具有清理功能，React Native 深度链接不需要的组件也会呈现

React native deep linking unwanted component renders even with cleanup function

react-native

react-hooks

deep-linking