Блог

Главная - Вопросы по программированию - Почему данные не обновляются после перехода на react native?

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

#react-native #fetch #react-navigation #updates #tabnavigator

#react-native #выборка #реакция-навигация #Обновления #tabnavigator

Вопрос:

У меня есть базовая вкладка навигации HOME-UPLOAD-PROFILE. На главном экране отображаются значения, которые извлекаются с помощью API с другого веб-сайта. После входа пользователя в систему навигации направляйте пользователя на эту домашнюю страницу, и «выборка» работает хорошо. Но когда я загружаю что-то с помощью экрана «ЗАГРУЗИТЬ», а затем возвращаю данные с экрана «ДОМОЙ», они не обновляются. В то время как ‘componentDidMount’ должен работать каждый раз и выводить данные при каждом нажатии на «ДОМАШНИЙ» экран, я не смог найти никакого решения или ответа

 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
    });
  }
}

Ответ №1:

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

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

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

1. Используйте глобальное состояние redux вместо состояния компонента. (Рекомендуется)

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

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

2. Выборка данных по событию фокусировки компонента

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

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

// Remove the listener when you are done
didFocusSubscription.remove();

Ответ №2:

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

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

Метки: