🧐[问题] protable colums 动态渲染问题

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

protable colums 动态渲染问题

通过其他页面跳转过来的在路径上写了表的id,然后想在页面protable渲染后 获取表在数据库定义的名称和类型，
动态渲染下列明下，现在的问题是，我跳转到当前页面没有变化，我点了查询他把列明渲染出来。这个怎么改

### 💻 示例代码
package.json
```
"dependencies": {
"@ant-design/icons": "^4.8.0",
"@ant-design/pro-components": "^2.6.35",
"@ant-design/use-emotion-css": "1.0.4",
"@umijs/route-utils": "^2.2.2",
"antd": "^5.11.0",
"classnames": "^2.3.2",
"js-yaml": "^4.1.0",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"omit.js": "^2.0.2",
"rc-menu": "^9.8.2",
"rc-util": "^5.27.2",
"react": "^18.2.0",
"react-dev-inspector": "^1.8.4",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0"
},
"devDependencies": {
"@ant-design/pro-cli": "^2.1.5",
"@testing-library/react": "^13.4.0",
"@types/classnames": "^2.3.1",
"@types/express": "^4.17.17",
"@types/history": "^4.7.11",
"@types/jest": "^29.4.0",
"@types/js-yaml": "^4.0.9",
"@types/lodash": "^4.14.191",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/react-helmet": "^6.1.6",
"@umijs/fabric": "^2.14.1",
"@umijs/lint": "^4.0.52",
"@umijs/max": "^4.0.52",
"@umijs/plugin-access": "^2.4.3",
"cross-env": "^7.0.3",
"eslint": "^8.34.0",
"express": "^4.18.2",
"gh-pages": "^3.2.3",
"husky": "^7.0.4",
"jest": "^29.4.3",
"jest-environment-jsdom": "^29.4.3",
"lint-staged": "^10.5.4",
"mockjs": "^1.1.0",
"prettier": "^2.8.4",
"swagger-ui-dist": "^4.15.5",
"ts-node": "^10.9.1",
"typescript": "^4.9.5",
"umi-presets-pro": "^2.0.2"
},
"engines": {
"node": ">=12.0.0"
}

```

```
import React, {useEffect, useMemo, useRef, useState} from "react";
import {ActionType, PageContainer, ProColumns, ProTable} from "@ant-design/pro-components";
import {FormattedMessage, useIntl} from "@umijs/max";
import {Button} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {ResponseCode} from "@/models/Response";
import DangerConfirmModal from "@/components/DangerConfirmModal";
import MdmInstanceModalForm, {MdmInstanceModel} from "@/pages/mdmInstance/components/MdmInstanceModalForm";

import {Access, useAccess} from "@@/plugin-access";
import {deleteInstance, instanceTable} from "@/services/ExtMdmService";
import {history, useSearchParams} from "@@/exports";
import {MdmMainColumnsModel} from "@/pages/mdmMainColumns/components/MdmMainColumnsModalForm";
import {searchMdmMainColumnsList} from "@/services/BaseMdmMainColumnsService";
import {MdmMainColumnsSearchIModel} from "@/models/in/MdmMainColumnsSearchIModel";

const MdmInstance: React.FC = () => {

const intl = useIntl();

const access = useAccess();

const [searchParams, setSearchParams] = useSearchParams();
/**
* 新增弹框页面 控制状态
*/
const [addModalVisible, setAddModalVisible] = useState(false);
/**
* 修改弹框页面 控制状态
*/
const [modifyModalVisible, setModifyModalVisible] = useState(false);
/**
* proTable 选中的行的数据
*/
const [selectRow, setSelectRow] = useState();
/**
* proTable 批量选择 选中的行的key列的值
*/
const [selectRowKeys, setSelectRowKeys] = useState<[]>([]);
/**
* proTable的ref
*/
const actionRef = useRef();

/**
* 列表字段内容
*/
const tableColumns: ProColumns[] = [
{
title: ,
dataIndex: 'dataId',
valueType: 'text',
ellipsis: true,
hideInSearch: true,
},
{
title: ,
valueType: 'option',
render: (_, row) => [
{
setSelectRow(row)
setModifyModalVisible(true)
}}>

,

{
const newRow: MdmInstanceModel = {...row}
newRow.instanceId = undefined
setSelectRow(newRow)
setAddModalVisible(true)
}}
>


,

{
instanceTable(row.instanceId).then(res => {
if (res.code === ResponseCode.OK) {
actionRef.current?.reloadAndRest?.();
return true;
} else {
return false;
}
})
}}
>


,

{

}}
>


,
]
}]

const [columns, setColumns] = useState(tableColumns);

useEffect(() => {
let instanceId = searchParams.get('instanceId');
let mainId = searchParams.get('mainId');
if (instanceId !== null && mainId !== null) {
let search: MdmMainColumnsSearchIModel = new MdmMainColumnsSearchIModel();
search.mainId = Number.parseInt(mainId)
search.order = "+seq"
searchMdmMainColumnsList(search).then(res => {
let i = 1;
for (let one of res) {
tableColumns.splice(i, 0,
{
title: one.columnName,
dataIndex: one.columnId,
valueType: 'text',
ellipsis: true,
},
)
i += 1;
}
setColumns(tableColumns);
})
} else {
//跳回实例夜
history.push('/mdmInstance');
}
}, []);

return (
<>
{/*新增*/}
{
if (!value) {
setAddModalVisible(false)
}
}}
onSubmit={async (values) => {
// return await addOneMdmInstance(values).then(res => {
// if (res.code === ResponseCode.OK) {
// actionRef.current?.reloadAndRest?.();
// return true;
// } else {
// return false;
// }
// })
return false
}}
modalVisible={addModalVisible}
values={selectRow || {}}
/>
{/*修改*/}
{
if (!value) {
setModifyModalVisible(false)
}
}}
onSubmit={async (values) => {
// return await modifyOneMdmInstanceWithNull(values).then(res => {
// if (res.code === ResponseCode.OK) {
// actionRef.current?.reloadAndRest?.();
// return true;
// } else {
// return false;
// }
// })
return false
}}
modalVisible={modifyModalVisible}
values={selectRow || {}}
/>
{/*列表*/}

{
// let search: MdmInstanceSearchIModel = new MdmInstanceSearchIModel();
// copy(search, params)
// setSearchOrder(search, sort)
// return searchMdmInstancePage(search)
return []
}}
//加新增按钮
toolBarRender={() => [

{
setSelectRow({})
setAddModalVisible(true)
}}
>


,
0}
onSubmit={() => {
deleteInstance(selectRowKeys).then(res => {
if (ResponseCode.OK === res.code) {
actionRef.current?.reloadAndRest?.();
}
})
}}
values={{contentValue: {name: intl.formatMessage({id: "button.batchDelete"})}}}/>,

0}
onSubmit={() => {
// modifyListMdmInstanceIgnoreNull({instanceIdList: selectRowKeys, disabled: true}).then(res => {
// if (ResponseCode.OK === res.code) {
// actionRef.current?.reloadAndRest?.();
// }
// })

}}
values={{contentValue: {name: intl.formatMessage({id: "button.disable"})}}}/>,
0}
onSubmit={() => {
// modifyListMdmInstanceIgnoreNull({instanceIdList: selectRowKeys, disabled: false}).then(res => {
// if (ResponseCode.OK === res.code) {
// actionRef.current?.reloadAndRest?.();
// }
// })
}}
values={{contentValue: {name: intl.formatMessage({id: "button.enable"})}}}/>
]}
//批量选择的时候 主键字段名称
rowKey={"dataId"}
rowSelection={{
onChange: (keys) => {
// @ts-ignore
setSelectRowKeys(keys)
},
}}
//column的ref
actionRef={actionRef}
/>


)
}

export default MdmInstance;

```

### 🚑 其他信息

The report centers on the provided MdmInstance component, especially its useEffect, columns state, ProTable, and searchMdmMainColumnsList call. Start by tracing the initial route parameters and the asynchronous column-loading flow; done means the database-defined columns render when the page is first opened, without requiring a separate query action.

Written by the indexing model from the issue text.