为什么加上pagination属性,页数点击就不切换了,打印没有问题就不能切换页数

问题遇到的现象和发生背景
遇到的现象和发生背景,请写出第一个错误信息
用代码块功能插入代码,请勿粘贴截图。 不用代码块回答率下降 50%
import React from 'react'
import { useState, useEffect } from 'react';
import { Space, Table, Button } from 'antd';
import { Link } from 'react-router-dom';
import moment from 'moment/moment';
import '../pages/less/ListTable.css'
import { GetList } from '../request/api';
const LeftBox = (props) => {
  return (
    <div>
      <a className='spanBox' >{props.myname}</a>
      <span style={{ color: '#999' }} >{props.myTitle}</span>
    </div>
  )
}
export default function ListTable() {
  const [arr, setArr] = useState()
  const [pagination,setPagination] = useState( {current: 2,pageSize: 6,total: 20})
  const columns = [
    {
      dataIndex: 'myData',
      key: 'name',
      width: '65%',
      render: (text) => <div >
        {text}
      </div>,
    },
    {
      dataIndex: 'address',
      key: 'address', render: (text) => <div >
         {text}
      </div>,
    },
    {
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type='primary'onClick={()=>{console.log(record.key);}} >编辑</Button>
          <Button type='danger'>删除</Button>
        </Space>
      ),
    },
  ];
  const pageChange = (pagination) => {
    console.log(pagination);
  }
  const handleData = (current,pageSize) => {
    GetList(
      {num:current,
      count:pageSize}
    ).then(
      reponse => {
        const dataArr = [...reponse.data.arr]
        console.log(dataArr);
        let objArr = []
        let cc = []
        dataArr.map(
          (item)=>{
            let obj = {
              address:moment(item.date).format('YYYY-MM-DD hh:mm:ss'),
              myData:<LeftBox myname ={item.title} myTitle = {item.subTitle}/>,
              key:item.id
            }
            objArr.push(obj)
            cc.push(obj)
          }
          
        )
        setArr(objArr)
      },
      error => { console.log(error); }
    )
  }
  useEffect(() => {
    // handleData()
    handleData(pagination.current,pagination.pageSize)
  }, [])

  return (
    <div className='listTable'>
      <LeftBox />
      <div>
        <Table 
        onChange = {pageChange}
        pagination={pagination}
        showHeader={false} 
        columns={columns}
         dataSource={arr}
          />
      </div>
    </div>
  )
}


运行结果及详细报错内容
我的解答思路和尝试过的方法,不写自己思路的,回答率下降 60%
我想要达到的结果,如果你需要快速回答,请尝试 “付费悬赏”

img

img

我现在帮你改代码试试

你看下这个实例思路【element-ui 分页器的使用】,链接:https://blog.csdn.net/weixin_47258963/article/details/108619264?spm=1001.2101.3001.6650.17&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EESLANDING%7Edefault-17-108619264-blog-125661455.pc_relevant_landingrelevant&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EESLANDING%7Edefault-17-108619264-blog-125661455.pc_relevant_landingrelevant&utm_relevant_index=27

这可能是由于在绑定事件处理函数时出现了问题,或者是在事件处理函数内部出现了错误。这种情况下,可以尝试在事件处理函数内部添加调试信息,或者使用浏览器的开发者工具查看 JavaScript 控制台,以便于了解发生了什么。

在事件处理函数内部,可以使用 console.log() 函数输出调试信息。例如,可以在事件处理函数内部添加以下代码:

console.log("Page number clicked: ", pageNumber);

这将在控制台输出点击的页数,以便您可以查看是否存在问题。

您还可以使用浏览器的开发者工具查看 JavaScript 控制台。在 Chrome 中,您可以按 F12 打开开发者工具,然后在“Console”选项卡中查看控制台输出。这将帮助您了解发生了什么,并找出可能存在的问题。

  1. 你这么写无法触发useEffect
    useEffect(() => {
     // handleData()
     handleData(pagination.current,pagination.pageSize)
    }, [pagination])
    
  2. 你也没有设置pagination
    const pageChange = (pagination) => {
     setPagination(pagination);
    }