Antd Table 组件动态表头的问题 React

Question

官方的 DEMO 和网上据大部分的资料都是将 columns 写死的如下：

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }
];

<Table dataSource={dataSource} columns={columns} />;

但我想实现的是表头 columns 是从接口请求过来的，那该怎么弄？弄了很久都弄不出来：

const [columns, setColumns] = useState([]);
setColumns(async()=>{
    return await R_Resource_Select(routerParams.builder);
});
<Table dataSource={dataSource} columns={columns} />

因为刚用 React 所以各种东西都很模糊，希望解惑谢谢

Answer 1

首先请求返回的数据必须要有title(显示的名字)、dataIndex(数据里取的key名)

// 如果他的格式直接是
const mock = [{
    title: xxx,
    dataIndex: xxx,
}]
// 那你就直接赋值就行了
const columns = mock;

如果不是那你就把数据自己组装成{title:...,dataIndex:...}