thinkPHP数据分页，为啥点击分页按钮的时候会把整个模板模板一直重复渲染

Posted 2023-04-18

数据分页，点击第二页，或者其他任何页面，会导致出现图2的现象，整个页面会重复的生成，导致下拉全部都是一样的页面

参考技术A 这个看你前端是怎么实现的，你页面要无刷新的话，就用无刷新的，不是无刷新的，当然会重新渲染整个页面了。追问

直接用的是thinkphp的分页类，前端只用来展现，全部后台处理的，现在就是搞不懂为什么会重复生成，并不是刷新

追答

你在说什么重复生成？点击下一页，多追加了一个页面的内容？？

追问

不是说页面刷新，你看我图2，是不是原本一页的内容好好的，我点击下一页的时候，在这一页的下面，又生成了这样子的一个页面，放在这个页面下面，举个例子来说，就是一张照片，我点了以下，然后这张照片的下面一直出现这张照片，一直复制。。

追答

看起来没有什么问题了，你检查一下你的浏览器缓存呢

反应：分页工作不顺利

【中文标题】反应：分页工作不顺利

【英文标题】：React : Pagination is not Working Smoothly

【发布时间】：2019-08-04 12:17:19

【问题描述】：

我正在 React 中进行分页。我正在通过 API 从在线服务器获取数据。 API 内置于 Loopback 中。我对 next 和 previous button 有一些问题。如果用户想要呈现下一页数据，我会为分页创建逻辑，它会点击下一页，如果用户想要加载上一页数据，它会点击上一个按钮。使用我的逻辑下一个按钮工作正常，如果用户单击下一个按钮，它会呈现下一页数据，但问题是如果用户想单击previous 按钮，它会加载下一页数据而不是上一页数据。如果用户单击下一步它必须加载下一页数据或用户想要加载上一页数据它必须使用 prev 按钮加载上一页，请有人帮助我如何进行这种类型的分页。

代码

        class Example extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      Item: 5,
      skip: 0
    

    this.handleClick = this.handleClick.bind(this);
  

  urlParams() 
    return `http://localhost:3001/meetups?filter[limit]=$(this.state.Item)&&filter[skip]=$this.state.skip`
  

  handleClick() 
    this.setState(skip: this.state.skip + 1)
  

  render() 
    return (
      <div>
        <a href=this.urlParams()>Example link</a>
        <pre>this.urlParams()</pre>
        <button onClick=this.handleClick>Change link</button>
      </div>
    )
  



ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

【参考方案1】：

如果您查看位于 https://react.semantic-ui.com/addons/pagination/ 的分页组件的文档，您会看到您将 this.btnClick 传递给 onClick=this.btnClick，而它应该传递给 onPageChange=this.btnClick

<Pagination
    boundaryRange=0
    onPageChange=this.btnClick
    defaultActivePage=1
    ellipsisItem=null
    firstItem=null
    lastItem=null
    siblingRange=1
    totalPages=10
/>

传入onPageChange的参数如下： onPageChange(event: SyntheticEvent, data: object)

目前尚不清楚状态中的 Item 和 Skip 之间的区别以及您尝试使用 btnClick 函数完成的任务。看起来您并没有考虑到您可以单击分页组件上的编号页面而不仅仅是 nextPage 和 PrevPage 按钮的可能性。

我将假设 Item 表示您想要进入的当前页面，在这种情况下，在您的 btnClick 函数中，您可以从 data 参数中获取下一个活动页面（这将返回分页数下一页 - 无论您是直接单击该数字还是单击 nextPage）。

btnClick(event, data)
    const nextPage = data.activePage;
    this.setState(item: nextPage);

【参考方案2】：

您刚刚以添加 skip:skip+10 的一种方式编写 btnClick(e)，但如果您需要以前的数据，则应减去 skip:skip-10

所以解决办法是

btnClick(e,type)
const Item=this.state.Item;
const skip=this.state.skip;
If(type === “next”)
this.setState(
  Item,
  skip:skip-10
,()=> this.getData())
 else 
  this.setState(
  Item,
  skip:skip+10
 )

// 调用函数 this.btnClick(e, “next”) 或 prev for pervious

【讨论】：

感谢您的评论，但很抱歉它无法正常工作。我在问题中提供了完整代码，如果可以，请您使用您自己的代码对其进行编辑。谢谢

semantic-ui-react 对 next 和 prev 没有任何回调，所以我认为这仍然是不可能的，你可以尝试覆盖 state.data 将新的响应数据推送到 state。数据以这种方式它将具有以前的数据并且可以正常工作，但是您需要避免分页 onClick 参数