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

[wqp9204]

提问前先看看：

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<boolean>(false);
  /**
   * 修改弹框页面 控制状态
   */
  const [modifyModalVisible, setModifyModalVisible] = useState<boolean>(false);
  /**
   * proTable 选中的行的数据
   */
  const [selectRow, setSelectRow] = useState<MdmInstanceModel>();
  /**
   * proTable 批量选择 选中的行的key列的值
   */
  const [selectRowKeys, setSelectRowKeys] = useState<[]>([]);
  /**
   * proTable的ref
   */
  const actionRef = useRef<ActionType>();

  /**
   * 列表字段内容
   */
  const tableColumns: ProColumns[] = [
    {
      title: <FormattedMessage
        id="col.dataId"
      />,
      dataIndex: 'dataId',
      valueType: 'text',
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: <FormattedMessage
        id="title.operate"
      />,
      valueType: 'option',
      render: (_, row) => [
        <a
          key="modify"
          onClick={() => {
            setSelectRow(row)
            setModifyModalVisible(true)
          }}>
          <FormattedMessage
            id={access.canMdmInstancePageModify ? "button.modify" : "button.info"}
          />
        </a>,
        <Access accessible={access.canMdmInstancePageAdd} key="copy">
          <a
            type="text"
            onClick={() => {
              const newRow: MdmInstanceModel = {...row}
              newRow.instanceId = undefined
              setSelectRow(newRow)
              setAddModalVisible(true)
            }}
          >
            <FormattedMessage
              id="button.copy"
            />
          </a>
        </Access>,
        <Access accessible={access.canMdmInstancePageModify && !row.instanceFlag} key="copy">
          <a
            key={"instance"}
            type="text"
            onClick={() => {
              instanceTable(row.instanceId).then(res => {
                if (res.code === ResponseCode.OK) {
                  actionRef.current?.reloadAndRest?.();
                  return true;
                } else {
                  return false;
                }
              })
            }}
          >
            <FormattedMessage
              id="button.instance"
            />
          </a>
        </Access>,
        <Access accessible={row.instanceFlag === true} key="copy">
          <a
            key={"instanceData"}
            type="text"
            onClick={() => {

            }}
          >
            <FormattedMessage
              id="button.instanceData"
            />
          </a>
        </Access>,
      ]
    }]

  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 (
    <>
      {/*新增*/}
      <MdmInstanceModalForm
        accessible={access.canMdmInstancePageAdd}
        onCancel={(value) => {
          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 || {}}
      />
      {/*修改*/}
      <MdmInstanceModalForm
        accessible={access.canMdmInstancePageModify}
        onCancel={(value) => {
          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 || {}}
      />
      {/*列表*/}
      <PageContainer>
        <ProTable
          headerTitle={intl.formatMessage({
            id: 'title.table'
          })}
          search={{labelWidth: "auto"}}
          scroll={{x: 'max-content'}}
          pagination={{showQuickJumper: true}}

          //配置列名和查询条件
          columns={columns}
          //配置返回参数的接口方法
          request={async (params = {}, sort) => {
            // let search: MdmInstanceSearchIModel = new MdmInstanceSearchIModel();
            // copy(search, params)
            // setSearchOrder(search, sort)
            // return searchMdmInstancePage(search)
            return []
          }}
          //加新增按钮
          toolBarRender={() => [
            <Access accessible={access.canMdmInstancePageAdd} key={"add"}>
              <Button
                type="primary"
                onClick={() => {
                  setSelectRow({})
                  setAddModalVisible(true)
                }}
              >
                <PlusOutlined/> <FormattedMessage id="button.add"/>
              </Button>
            </Access>,
            <DangerConfirmModal
              key={"batchDelete"}
              buttonType={"button"}
              buttonI18nCode={"button.batchDelete"}
              accessible={access.canMdmInstancePageDelete && selectRowKeys.length > 0}
              onSubmit={() => {
                deleteInstance(selectRowKeys).then(res => {
                  if (ResponseCode.OK === res.code) {
                    actionRef.current?.reloadAndRest?.();
                  }
                })
              }}
              values={{contentValue: {name: intl.formatMessage({id: "button.batchDelete"})}}}/>,

            <DangerConfirmModal
              key={"disable"}
              buttonType={"button"}
              buttonI18nCode={"button.disable"}
              accessible={access.canMdmInstancePageModify && selectRowKeys.length > 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"})}}}/>,
            <DangerConfirmModal
              key={"enable"}
              buttonType={"button"}
              buttonI18nCode={"button.enable"}
              accessible={access.canMdmInstancePageModify && selectRowKeys.length > 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}
        />
      </PageContainer>
    </>
  )
}

export default MdmInstance;

🚑 其他信息

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#8529][🧐[问题] protable colums 动态渲染问题][100%]