Блог

Для меня это звучит так странно, и я понятия не имею, что здесь не так, потому что в среде разработки все в порядке. Итак, способ работы приложения прост: пользователь входит в систему, выбирает своего терапевта, затем оплачивает его, и после успешной оплаты бронирование подтверждается, но проблема в том, что бронирование бронируется ровно 3 раза в базе данных firebase в режиме реального времени, несмотря ни на что, и я не знаю почему… (в области разработки все в порядке, и она будет записываться только один раз по запросу пользователя)

вот мой код бронирования:

 const bookingHandler = () => {
    Linking.openURL('http://www.medicalbookingapp.cloudsite.ir/sendPay.php');
  }

  const handler = (e) => handleOpenUrl(e.url);
  useEffect(() => {

    Linking.addEventListener('url', handler)

    return () => {
      Linking.removeEventListener('url', handler);

    }

  });

  const handleOpenUrl = useCallback((url) => {
    const route = url.replace(/.*?://w*:w*/W/g, '') // exp://.... --> ''
    const id = route.split('=')[1]

    if (id == 1) {
      handleDispatch();
      toggleModal();
    } else if (id == 0) {
      console.log('purchase failed...');
      toggleModal();
    }
  });

  const handleDispatch = useCallback(() => {
    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)
  })
 

действие бронирования:

 export const addBooking = (therapistId, therapistFirstName, therapistLastName, sessionTime, sessionDate, slotTaken) => {
  return async (dispatch, getState) => {
    let userId = firebase.auth().currentUser.uid
    
    const confirmDate = moment(new Date()).format("ddd DD MMMM YYYY")

    const response = await fetch(
      `https://mymedicalbooking.firebaseio.com/bookings/${userId}.json`,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          userId,
          therapistId,
          confirmDate,
          therapistFirstName,
          therapistLastName,
          sessionTime,
          sessionDate,
          slotTaken
        })
      }
    );

    if (!response.ok) {
      throw new Error('Something went wrong!');
    }

    const resData = await response.json();
   
    dispatch({
      type: ADD_BOOKING,
      bookingData: {
        userId: userId,
        therapistId: therapistId,
        therapistFirstName: therapistFirstName,
        therapistLastName: therapistLastName,
        sessionTime: sessionTime,
        sessionDate: sessionDate
      }
    });
  };
};
 

Редуктор бронирования:

 const initialState = {
  bookings: [],
  userBookings: []
};

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_BOOKING:
      const newBooking = new Booking(
        action.bookingData.id,
        action.bookingData.therapistId,
        action.bookingData.therapistFirstName,
        action.bookingData.therapistLastName,
        action.bookingData.bookingdate
      );
      return {
        ...state,
        bookings: state.bookings.concat(newBooking)
      };
    case FETCH_BOOKING:
      const userBookings = action.userBookings;
      return {
        ...state,
        userBookings: userBookings
      };
  }

  return state;
};
 

кроме того, я использую expo, SDK 38, Firebase в качестве базы данных.

Мне действительно нужно решить эту проблему, пожалуйста, если у вас есть какие-либо идеи, не стесняйтесь оставлять комментарии или отвечать на все из них с благодарностью.

Обновить:

Я прокомментировал все функции глубокой компоновки и протестировал результат, все в порядке. поэтому я думаю, что проблема в том eventListener , или как я реализовал свой код глубокой компоновки, но я все еще не понимаю, что не так с кодом, который отлично работает в expo и имеет ошибку в автономном режиме.

ОБНОВЛЕНИЕ 2

Я попытался добавить массив зависимостей, как было предложено, но у меня все та же проблема..

существует проблема, из-за expo-linking которой в автономном отдельном приложении Android: url-адрес события срабатывает несколько раз . ПРОБЛЕМА

Я просто завернул свою функцию обработки в lodash debounce с ожиданием 1000 мс

установите Lodash следующим образом

 yarn add lodash
 

 import _ from 'lodash';

const handleOpenUrl = _.debounce((event) => {
    // here is other logic
  },1000);
 

вот ваш код

просто добавьте пустой массив зависимостей useEffect и используйте useCallback его следующим образом

 useEffect(() => {
    Linking.addEventListener('url', handleOpenUrl)
    return () => {
      Linking.removeEventListener('url', handleOpenUrl);
    }

  },[]);  //like this []
 

 const handleOpenUrl = _.debounce((url) => {
    const route = url.replace(/.*?://w*:w*/W/g, '') // exp://.... --> ''
    const id = route.split('=')[1]

    if (id == 1) {
      handleDispatch();
      toggleModal();
    } else if (id == 0) {
      console.log('purchase failed...');
      toggleModal();
    }
  },1000); //like this []
 

 const handleDispatch = useCallback(() => {
    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)
  },[selected])