react antd的Table中，如何动态的改变表格数据

在React Antd中，如果您改变了Table组件的数据源（dataSource），Table会自动重新渲染以反映新的数据。因此，只要您在状态或props中正确更新数据源，Table就会自动更新。

以下是一个示例代码片段，展示如何使用React状态（state）和按钮来更改数据源并更新Table组件：

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

const DynamicTable = () => {
  const [data, setData] = useState([
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park'
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park'
    }
  ]);

  // 更改数据源
  const changeData = () => {
    const newData = [
      {
        key: '4',
        name: 'Tom White',
        age: 25,
        address: 'Paris No. 1 Lake Park'
      },
      {
        key: '5',
        name: 'Jerry Red',
        age: 30,
        address: 'Berlin No. 1 Lake Park'
      }
    ];
    setData(newData);
  };

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age'
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address'
    }
  ];

  return (
    <div>
      <Button onClick={changeData}>Change Data</Button>
      <Table dataSource={data} columns={columns} />
    </div>
  );
};

export default DynamicTable;

　　

在上述示例中，我们使用useState钩子创建一个名为data的状态变量，用于存储表格数据。通过点击"Change Data"按钮，调用changeData函数来更新数据源。changeData函数会生成一个新的数据源数组，并将其设置为新的data状态。然后，将data作为dataSource传递给Antd的Table组件，以显示更新后的数据。

请注意，

1、Table组件会自动检测数据源的变化，并重新渲染以反映新的数据。因此，只要您在状态或props中正确更新数据源，Table就会自动更新。

2、这里要非常注意的是，在设置新的数据源时，新的数据源，一定要和旧的数据源时不用的对象

备注：可以采用lodash来拷贝对象

import _ from "lodash";
let newData = _.cloneDeep(data);

　　

参考：chatGpt