将React-Slick与查询参数同步

Question

我正在使用React-Slick在转盘中呈现<Report />组件。我想将每个<Report />的reportId与查询参数同步。

例如，用户可以通过转到myapp.com/reports?id=1查看特定的报告，它会将他们带到该特定的“幻灯片”。

我遇到的问题是，report数据是在幻灯片初始化之前加载的。我找不到react-slick的onInit或onReInit的好例子。

Answer 1

我没有使用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))
  ...
}

我希望有人会觉得这很有用！