Синхронизация React-Slick с параметрами запроса - PullRequest
Новая
       10

Синхронизация React-Slick с параметрами запроса

0 голосов
/ 12 февраля 2019

Я использую React-Slick для рендеринга <Report /> компонентов в карусели.Я хотел бы синхронизировать каждый <Report /> reportId с параметрами запроса.

Например, пользователь сможет увидеть конкретный отчет, перейдя на myapp.com/reports?id=1, и он перейдет к этому конкретному «слайду».

Проблема, с которой я столкнулся,что данные report загружаются до инициализации слайдов.Я не могу найти хороших примеров onInit или onReInit.

Reaction-Slick.

1 Ответ

0 голосов
/ 12 февраля 2019

Вместо использования onInit или onReInit я просто использовал настройку initialSlide и использовал componentDidUpdate(). 

componentDidUpdate = (prevProps, prevState) => {

const queryParams = qs.parse(this.props.location.search)
if (prevProps.reports !== this.props.reports) {
  const sortedReports = this.sortReportsByDate(this.props.reports)

  this.setSlideIndex(sortedReports.findIndex(i => i.id === parseInt(queryParams.reportId, 10)))
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

if (prevState.slideIndex !== this.state.slideIndex) {
  this.setQueryParams({
    reportId: this.sortReportsByDate(this.props.reports)[this.state.slideIndex].id
  })
}

}

И настройки: 

const settings = {
  ...
  initialSlide: reportsSortedByDate.findIndex(i => i.id === parseInt(queryParams.reportId, 10))
  ...
}

Я надеюсь, что кто-то найдет это полезным!

...