Question

我仍然很擅长做出反应，并试图做出反应的分页，它有一点点缺陷我通过划分数据长度/限制显示数据=总页数来创建分页。但如果我的数据是奇数，我就无法得到最后的数据。这是我的代码

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>
  }) }*
}

主要数据的分页

1 个答案: