Когда я нажимаю кнопку "Назад", страница не меняется, хотя URL-адрес верный - PullRequest
Новая
       6

Когда я нажимаю кнопку "Назад", страница не меняется, хотя URL-адрес верный

0 голосов
/ 04 февраля 2020

Я попытался реализовать разбиение на страницы для данных в реакции. Если я нажимаю любую страницу, открывается нужная страница с данными. Например, если я нажму страницу 3, данные на странице 3 будут загружены. После этого, когда я нажимаю 5, данные на странице 5 загружаются. Теперь, если я нажму кнопку «Назад», URL отобразит страницу 3, но смонтированный компонент - страницы 5. Может ли кто-нибудь помочь мне в этом?

Вот мой компонент смонтировал:

componentDidMount = asyn c () => {

const { state } = this.props.location;
if (state && state.mesg) {
  this.setState({
    mesg: this.props.location.state.mesg,
    mesgType: this.props.location.state.mesgType
  });
  const stateCopy = { ...state };
  delete stateCopy.mesg;
  this.props.history.replace({ state: stateCopy });
}
this.closeMesg(10000);
let pageNo = this.props.location.search.split("=");
await this.fetchCompaniesAPI(pageNo[1] || 1);
this.setState({ isLoading: false });


};

Здесь я извлекаю номер страницы из URL и вызываю API этой страницы.

Может кто-нибудь, пожалуйста, помогите мне.

Скажите, если вам нужно больше подробностей.

Я попробовал window.onpopstate, а затем refre sh, но это не помогло

Я попытался с помощью componentDidUpdate, но все же это не так рабочая 

componentDidUpdate= async (prevProps, prevState)=> {
    await this.setState({ isLoading: true });
    let pageNo = this.props.location.search.split("=");
    if (prevState.pageNo !== pageNo[1]) {
    await this.fetchCompaniesAPI(pageNo[1] || 1);
    this.setState({ isLoading: false });
    }
  }

Ответы [ 2 ]

0 голосов
/ 04 февраля 2020

Если вы находитесь на том же маршруте, URL изменится, но компонент не будет перемонтирован, следовательно, ваш код componentDidMount не будет выполнен.

Для этого вы должны использовать componentDidUpdate.

Проверьте, не изменился ли номер вашей страницы, и выполните выборку снова. 

componentDidUpdate = async(prevProps: Props, prevState: State) => {
    if (prevProps.location !== this.props.location) {
      const pageNo = this.props.location.search.split("=");
      await this.fetchCompaniesAPI(pageNo[1] || 1);
    }
  }

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

0 голосов
/ 04 февраля 2020

Вам необходимо реплицировать те же логики c в обновлении компонента, также вам нужно выполнять логи c только тогда, когда изменилось было pageNo.

Например: 

componentDidUpdate(prevProps, prevState) {
  if (prevState.pageNo !== this.state.pageNo) {
    console.log('page number has changed, do logic here...')
  }
}
...