无法使Ant设计表格单元格引用动态列数

import React, { useState } from 'react';
import { Table } from 'antd';

const DynamicColumnsTable = () => {
  const [columns, setColumns] = useState([
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
  ]);
  const [key, setKey] = useState(0);

  const handleAddColumn = () => {
    const newColumn = { title: `Column ${columns.length + 1}`, dataIndex: `column${columns.length + 1}`, key: `column${columns.length + 1}` };
    setColumns([...columns, newColumn]);
    setKey(key + 1); // 改变key值强制重新渲染
  };

  return (
    <div>
      <button onClick={handleAddColumn}>Add Column</button>
      <Table columns={columns} dataSource={[]} key={key} />
    </div>
  );
};

export default DynamicColumnsTable;

import React, { useState, useEffect } from 'react';
import { Table } from 'antd';

const DynamicColumnsTable = () => {
  const [columns, setColumns] = useState([
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
  ]);

  const handleAddColumn = () => {
    const newColumn = { title: `Column ${columns.length + 1}`, dataIndex: `column${columns.length + 1}`, key: `column${columns.length + 1}` };
    setColumns([...columns, newColumn]);
  };

  useEffect(() => {
    // 这里可以处理列数变化后的逻辑
  }, [columns]);

  return (
    <div>
      <button onClick={handleAddColumn}>Add Column</button>
      <Table columns={columns} dataSource={[]} />
    </div>
  );
};

export default DynamicColumnsTable;