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>
)
}
我现在帮你改代码试试
这可能是由于在绑定事件处理函数时出现了问题,或者是在事件处理函数内部出现了错误。这种情况下,可以尝试在事件处理函数内部添加调试信息,或者使用浏览器的开发者工具查看 JavaScript 控制台,以便于了解发生了什么。
在事件处理函数内部,可以使用 console.log() 函数输出调试信息。例如,可以在事件处理函数内部添加以下代码:
console.log("Page number clicked: ", pageNumber);
这将在控制台输出点击的页数,以便您可以查看是否存在问题。
您还可以使用浏览器的开发者工具查看 JavaScript 控制台。在 Chrome 中,您可以按 F12 打开开发者工具,然后在“Console”选项卡中查看控制台输出。这将帮助您了解发生了什么,并找出可能存在的问题。
useEffect(() => {
// handleData()
handleData(pagination.current,pagination.pageSize)
}, [pagination])
const pageChange = (pagination) => {
setPagination(pagination);
}