javascript - 即使在页面刷新react js和react router中也渲染相同的选定数字

Question

我正在研究分页..

我不想在页面刷新时对分页中的选定页面进行更改。例如:

我选择了页码 5。因此，如果我刷新页面，则默认为 1。但我想要的是，当我选择 5 时，即使在页面刷新时，我的事件页码也应保持 5 而不是 1。

下面的代码是我的分页代码:

const {data, currentPage} = this.state
let current = currentPage, rangeDots = [], l, arr = []
current = current < 2 ? current + 1 : current >= data.total_pages ? current - 1 : current
for (let i = 1; i <= data.total_pages; i++) {
    if (i == 1 || i == data.total_pages || i >= current - 1 && i <= current + 1) {
        l = l ? i - l !== 1 ? rangeDots.push(<a>...</a>) : null : l
        rangeDots.push(<a className={i==currentPage?'active':''} href='#' key={i} id={i} onClick={() => this.fetchData(i)}>{i}</a>)
        l = i;
    }
}   

Answer 1

您可以使用 localStorage 。

实现起来非常简单。

在您的 fetchData 中功能，可以设置currentPage在localStorage .

localStorage.setItem('currentPage', page_number)  //here page_number might be your `i` passed to `fetchData` function

获取currentPage来自localStorage ,

constructor(props){
  super(props);
  this.state = {
     currentPage: localStorage.getItem('currentPage') ? localStorage.getItem('currentPage') : 1
  }
}

Simple Demo

<小时/>

更新

您正在调用this.fetchData()在构造函数中。 fetchData正在接受 1 个参数，您将其设置为 1默认情况下。那么每次刷新页面都是设置id的值至1 .

您需要使用componentDidMount您的 API 调用的方法，并传递 this.state.currentPage至fetchData功能。

我已经更正了您的代码，请参阅演示。

Demo