React Navigation «Фокус» слушатель событий не использует обновленное значение - PullRequest
Новая
       31

React Navigation «Фокус» слушатель событий не использует обновленное значение

0 голосов
/ 17 апреля 2020

У меня возникла проблема с приемником событий навигации реагирования!

Logi c: Я хочу получать информацию о корзине каждый раз, когда пользователь заходит на экран корзины с моей реакцией приложение Чтобы решить, получать информацию о корзине или нет, я проверяю идентификатор корзины в магазине. Если идентификатор корзины равен нулю, это означает, что корзина не была создана, поэтому просто выключите загрузчик и не извлекайте информацию о корзине. С другой стороны, если в магазине есть идентификатор корзины go получить данные о корзине.

Сценарий 1: Первый раз, если я приду на экран корзины, когда есть нет идентификатора корзины в магазине, он не будет загружать детали корзины: все хорошо! Но после последующих посещений экрана корзины он не будет получать сведения о корзине, даже если в магазине есть идентификатор корзины.

Сценарий 2: В первый раз, если я захожу в корзину Если в магазине есть идентификатор корзины, на этот раз он будет получать информацию о корзине, а также при последующих посещениях.

Возможная проблема: Таким образом, проблема заключается в том, что событие слушатель будет использовать значение корзины, которое будет предоставлено при первом запуске, и не будет учитывать обновленное значение! Пожалуйста, направьте меня в правильном направлении! 

useEffect(()=>{
    let cartId = context.store.cartReducer.cart.id;
    const unsubscribe = props.navigation.addListener('focus', () => {
        if(cartId) {
            setIsDetailsLoading(true);
            fetchCartDetails(context.dispatch, {cartId: cartId});
        } else {
            setIsDetailsLoading(false);
        }
    });
    return unsubscribe;
}, []);

Решение

Так что в конце концов я понял, что если вы используете значение, которое может измениться, затем вы должны добавить его в массив (второй параметр крючка useEffect), который ранее был пустым.

Таким образом, код выглядит как ... 

useEffect(()=>{
    let cartId = context.store.cartReducer.cart.id;
    const unsubscribe = props.navigation.addListener('focus', () => {
        if(cartId) {
            setIsDetailsLoading(true);
            fetchCartDetails(context.dispatch, {cartId: cartId});
        } else {
            setIsDetailsLoading(false);
        }
    });
    return unsubscribe;
}, [context.store.cartReducer.cart.id]);

Ответы [ 2 ]

0 голосов
/ 23 апреля 2020

В React Navigation v5.x следует использовать «Жизненный цикл навигации»

Документация здесь

Пример из документации: 

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}
0 голосов
/ 17 апреля 2020

Для быстрой навигации 4.x Попробуйте «willFocus» вместо «focus» 

useEffect(()=>{
    let cartId = context.store.cartReducer.cart.id;
    const unsubscribe = props.navigation.addListener('willFocus', () => {
        if(cartId) {
            setIsDetailsLoading(true);
            fetchCartDetails(context.dispatch, {cartId: cartId});
        } else {
            setIsDetailsLoading(false);
        }
    });
    return unsubscribe;
}, []);
...