使用React的useState钩子和useEffect钩子来解决
示例代码:
import React, { useState, useEffect } from 'react'; import { Table } from 'antd';
const MyTable = () => { const [dataSource, setDataSource] = useState([]);
useEffect(() => { // 获取数据源 const source = getData(); setDataSource(source); }, []);
const getData = () => { // 获取数据的逻辑 return [ { name: '张三', age: 18 }, { name: '李四', age: 19 }, { name: '王五', age: 20 } ]; };
const columns = [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' } ];
return
export default MyTable;
在这段代码中,我们在组件中使用了useState钩子来创建了一个dataSource状态,然后使用useEffect钩子来在组件挂载时获取数据源,并更新dataSource状态。这样,每次组件重新渲染时,dataSource都已经更新,不用再手动刷新表格了。
下一篇:表格转换与排名