主数据的分页

Question

我仍然是react的新手，并且尝试在react中进行分页，并且它有一个小缺陷--我通过除以数据长度/限制显示数据=总页面创建了分页。但如果我的数据是奇数，我就无法得到最后的数据。这是我的密码

class MyApp extends React.Component {
contructor() {
 this.state = {
   data: [],
   page: 1,
   limit: 5,
   dataLength: '',
 }
}

componentDidMount() {
 this.getData()
}

setPage(data) {
this.setState({ page: data },
() => {this.geData()}
 )
}
 setLimit(e) {
  this.setState({ limit: parseInt(e.target.value) },
  () => {this.getData()}
 )
}
getData(){
 axios({
  method: 'GET',
  url: `localhost:3000`,
})
.then((data) => {
  this.setState({
    data: data,
    dataLength: data.length
  });
})
.catch(err => console.log(err))
  }
 }
render() {
*let links= []
for (let i = 1; i <= (this.state.dataLength / this.state.limit); i++) 
{links.push(i)}*
  <select defaultValue='0' onChange={(e) => this.setLimit(e)}>
    <option disabled='true' value={0}>Select Limit Data</option>
    <option value={10}>10</option>
    <option value={50}>50</option>
    <option value={100}>100</option>
  </select>

 <h1>PAGE {this.state.page}</h1>
  *{ links.map((data, i) => {
 return <Button className='links' key={ i } onClick={() => 
 this.setPage(data)}> { data }</Button>
  }) }*
}

Answer 1

例如:如果您的限制为5，并且您的数据长度为53，您将需要11页(10页有5条记录，最后一页有3条记录)。

但是在您的代码中有：this.state.dataLength / this.state.limit，它的示例号是53/5 = 10.6，它将导致10页(1页将丢失)。

因此，您需要删除除法的结果，以使其工作，因为ceil(10.6) = 11。只需使用Math.ceil(this.state.dataLength / this.state.limit)，它就会像预期的那样工作

class MyApp extends React.Component {
contructor() {
 this.state = {
   data: [],
   page: 1,
   limit: 5,
   dataLength: '',
 }
}

componentDidMount() {
 this.getData()
}

setPage(data) {
this.setState({ page: data },
() => {this.geData()}
 )
}
 setLimit(e) {
  this.setState({ limit: parseInt(e.target.value) },
  () => {this.getData()}
 )
}
getData(){
 axios({
  method: 'GET',
  url: `localhost:3000`,
})
.then((data) => {
  this.setState({
    data: data,
    dataLength: data.length
  });
})
.catch(err => console.log(err))
  }
 }
render() {
*let links= []
for (let i = 1; i <= (Math.ceil(this.state.dataLength / this.state.limit)); i++) 
{links.push(i)}*
  <select defaultValue='0' onChange={(e) => this.setLimit(e)}>
    <option disabled='true' value={0}>Select Limit Data</option>
    <option value={10}>10</option>
    <option value={50}>50</option>
    <option value={100}>100</option>
  </select>

 <h1>PAGE {this.state.page}</h1>
  *{ links.map((data, i) => {
 return <Button className='links' key={ i } onClick={() => 
 this.setPage(data)}> { data }</Button>
  }) }*
}