Почему данные не обновляются после перехода на родную реакцию?

У меня есть основная вкладка навигации ГЛАВНАЯ-ЗАГРУЗИТЬ-ПРОФИЛЬ. Экран «HOME» имеет значения, которые извлекаются с помощью API с другого веб-сайта. После того, как пользователь войдет в систему, навигационная система направит пользователя на эту домашнюю страницу и загрузит ее. Но когда я загружаю что-то, используя экран «ЗАГРУЗИТЬ», а затем возвращаю данные экрана «HOME», они не обновляются. Принимая во внимание, что «componentDidMount» должен работать каждый раз и приводить данные при каждом нажатии экрана «HOME», я не мог найти никакого решения или ответа.

export default class Home extends Component {
  state = {
    data: []
  };
  async componentDidMount() {
    //Burada kullanıcı yoksa ülkeleri getireceğiz
    const rest = await fetch(
      'https://www.birdpx.com/mobile/fotografgetir/' + this.state.page,
      {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-type': 'application/json'
        },
        body: JSON.stringify(datam)
      }
    );

    const gelenVeri = await rest.text();
    let convertedVeri = JSON.parse(gelenVeri);

    this.setState({
      data: convertedVeri
    });
  }
}

react-native fetch react-navigation updates tabnavigator
person Onur ÇİÇEK    schedule 26.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете проверить, зарегистрировавшись, срабатывает ли componentDidMount.

componentDidMount не будет срабатывать при переходе между вкладками в tabNavigator, за исключением первого раза, когда tabNavigator смонтирован.

Вы можете выбрать один из следующих 2 способов реализовать то, что вам нужно.

<сильный>1. Используйте глобальное состояние редукции вместо состояния компонента. (рекомендуется)

Вы можете внедрить redux в свой проект (если не используете). Используйте состояние избыточности в компоненте Home вместо текущего состояния компонента.

На экране Upload после завершения загрузки вы можете изменить хранилище избыточности, отправив действие. Это немедленно отразится на вашем компоненте Home.

<сильный>2. Получить данные о событии фокуса компонента

Если вы хотите поймать событие фокуса для определенного компонента вкладки, вы можете использовать прослушиватель событий didFocus жизненного цикла навигации.

const didFocusSubscription = this.props.navigation.addListener(
  'didFocus',
  payload => {
    console.debug('didFocus', payload);
  }
);

// Remove the listener when you are done
didFocusSubscription.remove();
person baymax    schedule 26.11.2020

arrow_upward
0
arrow_downward

Если вы используете реагирующую навигацию, компоненты не размонтируются при переходе от одного экрана к другому в навигаторе стека. Вы можете прослушивать события жизненного цикла навигации в компоненте (https://reactnavigation.org/docs/4.x/navigation-prop/#addlistener---subscribe-to-updates-to-navigation-lifecycle)

или если вы используете withNavigationFocus HOC для передачи свойства навигации компоненту, вы можете использовать свойство isFocused, чтобы узнать о недавнем фокусе на вашем компоненте.

person vikasverma92    schedule 26.11.2020