pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

Published 20 hours ago • verified publisher icon ant-design

🧐[问题]使用ProTable控制台的警告怎么去掉啊！！！！看着膈应人😔

Open freesaber opened this issue 1 year ago • 15 comments

开发环境：

  • node v20.16.0
  • vite v5.20.0
  • ant v5.4.0

页面代码：

import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd';
import { useRef } from 'react';
import { Auth } from '@/types'
import { getRolePage } from '@/api/authApi';

const columns: ProColumns<Auth.Role>[] = [
  {
    dataIndex: 'index',
    valueType: 'indexBorder',
    width: 48,
  },
  {
    title: '角色编码',
    key: 'code',
    dataIndex: 'code'
  },
  {
    title: '角色名称',
    key: 'name',
    dataIndex: 'name'
  },
  {
    title: '角色描述',
    key: 'description',
    dataIndex: 'description'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    hideInTable: true,
    search: {
      transform: (value) => {
        return {
          startTime: value[0],
          endTime: value[1],
        };
      },
    },
  },
  {
    title: '操作',
    valueType: 'option',
    key: 'option',
    render: (text, record, _, action) => [
      <a>
        编辑
      </a>,
      <a >
        查看
      </a>
    ],
  },
];

export default () => {
  const actionRef = useRef<ActionType>();
  return (
    <ProTable<Auth.Role>
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params, sort, filter) =>  {
        const result = await getRolePage({
          'qp-orgCode-eq': 'ORG1437957814041632769',
          currentPage: params.current || 1,
          pageSize: params.pageSize,
        });
        return {
          data: result.list,
          success: true,
          total: Number(result.totalCount),
        };
      }}

      rowKey="id"
      search={{
        labelWidth: 'auto',
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"

    />
  );
};

控制台警告内容：

Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at SingleObserver (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:2390:24)
    at ResizeObserver3 (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:2467:24)
    at http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:22667:34
    at Tooltip2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:27959:32)
    at http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:28611:16
    at span
    at div
    at div
    at div
    at div
    at div
    at DomWrapper4 (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:2376:5)
    at SingleObserver (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:2390:24)
    at ResizeObserver3 (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:2467:24)
    at ListToolBar2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:45294:34)
    at ToolBar (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:45600:27)
    at ToolbarRender2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:45680:5)
    at div
    at div
    at http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:23008:25
    at div
    at TableRender (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:46679:22)
    at ProTable2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:46875:28)
    at ErrorBoundary2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:10980:5)
    at ProConfigProvider2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:10861:24)
    at Container2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:44206:34)
    at ProviderTableContainer2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:47240:52)
    at http://127.0.0.1:8480/business/src/pages/AuthManagement/RoleManagement/index.tsx?t=1723192815125:76:21
    at RenderedRoute (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:4007:5)
    at Outlet (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:4377:26)
    at div
    at div
    at Watermark (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:105957:5)
    at div
    at div
    at div
    at GridContent2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:36876:46)
    at div
    at PageContainerBase2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:37519:24)
    at MotionWrapper (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7318:5)
    at ProviderChildren (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7423:5)
    at ConfigProvider (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7701:27)
    at ConfigProviderContainer2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:10768:24)
    at LocaleProvider (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:4822:13)
    at MotionWrapper (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7318:5)
    at ProviderChildren (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7423:5)
    at ConfigProvider (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7701:27)
    at ProConfigProvider2 (http://127.0.0.1:8480/business/node_modules/.vite/deps/@ant-design_pro-components.js?v=a53a8d84:10861:24)
    at PageContainer2
    at div
    at http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:68581:16
    at Layout
    at div
    at http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:68581:16
    at Layout
    at window.$RefreshReg$ (http://127.0.0.1:8480/business/src/layout/ManageLayout.tsx?t=1723190756113:29:27)
    at RenderedRoute (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:4007:5)
    at RenderErrorBoundary (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:3967:5)
    at DataRoutes (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:5119:5)
    at Router (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:4384:15)
    at RouterProvider (http://127.0.0.1:8480/business/node_modules/.vite/deps/react-router-dom.js?v=a53a8d84:4936:5)
    at div
    at App (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:20532:16)
    at MotionWrapper (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7318:5)
    at ProviderChildren (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7423:5)
    at ConfigProvider (http://127.0.0.1:8480/business/node_modules/.vite/deps/chunk-J7ADA5S5.js?v=a53a8d84:7701:27)
    at window.$RefreshReg$ (http://127.0.0.1:8480/business/src/App.tsx?t=1723192815125:25:18)

截图： image

freesaber avatar Aug 09 '24 08:08 freesaber

  1. 升级你的antd到最新版本，因为这个问题可能是antd引起的，见 https://github.com/ant-design/ant-design/issues/48709
  2. 升级你的pro-components版本到最新，因为这个问题也可能是rc-util引起的, rc-util在https://github.com/react-component/util/commit/f9b468ea0bdf8168c34e6ed11e534ee0c051a7c2 这个PR里面修复了这个问题,对应的版本为5.41.0，pro-components在https://github.com/ant-design/pro-components/commit/b13468f20880a03f4303d6032544359974653c8c 这个PR里面把rc-util升级到了^5.43.0，对应版本为2.7.11, 所以你要升级pro-components到2.7.11及以上版本
  3. 如果还有这个问题，就发出来，可能是pro-components 引起的，需要修复
  • ant v5.4.0

fnoopv avatar Aug 12 '24 10:08 fnoopv

  1. 升级你的antd到最新版本，因为这个问题可能是antd引起的，见 ⚠️ Some components throw findDOMNode is deprecated and will be removed in React 18.3 / 19 ant-design#48709
  2. 升级你的pro-components版本到最新，因为这个问题也可能是rc-util引起的, rc-util在react-component/util@f9b468e 这个PR里面修复了这个问题,对应的版本为5.41.0，pro-components在b13468f 这个PR里面把rc-util升级到了^5.43.0，对应版本为2.7.11, 所以你要升级pro-components到2.7.11及以上版本
  3. 如果还有这个问题，就发出来，可能是pro-components 引起的，需要修复
  • ant v5.4.0

我的版本依赖如下,也会显示这个警告.官网的demo在沙盒中打开也会显示这个问题。

{
    "react": "^18.3.1",
    "antd": "^5.20.1",
    "@ant-design/pro-components": "^2.7.15",
    "@ant-design/pro-form": "^2.29.0",
    "@ant-design/pro-layout": "^7.19.12",
    "@ant-design/pro-provider": "^2.14.9",
    "@ant-design/pro-table": "^3.16.6"
}

ghost avatar Aug 12 '24 16:08 ghost

image

jiazez avatar Aug 13 '24 09:08 jiazez 

    "@ant-design/pro-components": "^2.7.15",
    "antd": "^5.20.1",
    "next": "^14.2.4",
    "react": "^18",

依赖全最新，使用pro-table组件的页面还是会显示警告。

JJJW59 avatar Aug 19 '24 07:08 JJJW59

顶一下，我也是，看着不舒服： "@ant-design/pro-components": "^2.7.13", "antd": "^5.19.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", "react-redux": "^9.1.2", "react-router-dom": "^6.24.1",

0x457 avatar Aug 20 '24 10:08 0x457

+1

zhengmenghuang avatar Aug 22 '24 07:08 zhengmenghuang

+1

bxter avatar Aug 28 '24 09:08 bxter

+1

ychost avatar Sep 05 '24 02:09 ychost

+1

echoyl avatar Sep 09 '24 07:09 echoyl

有没有已经解决的? "react": "^18.3.1", "react-dom": "^18.3.1","@ant-design/pro-components": "^2.7.15", "antd": "^5.19.2",

wangkai942901902 avatar Sep 10 '24 09:09 wangkai942901902

+1 "@ant-design/pro-components": "^2.7.15", "antd": "5.20.3",

researchlab avatar Sep 12 '24 05:09 researchlab

import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import { HashRouter } from 'react-router-dom'; import { ConfigProvider } from 'antd'; import zhCN from 'antd/locale/zh_CN'; import App from '@/App'; import './styles/reset.scss'; import './styles/index.scss';

createRoot(document.getElementById('root')!).render( <StrictMode> <ConfigProvider locale={zhCN} theme={{ components: { Layout: { headerHeight: 50, headerPadding: 16, }, Table: { headerBg: '#3170FF', headerColor: '#fff', headerSplitColor: '#3170FF' } } }}> <HashRouter> <App /> </HashRouter> </ConfigProvider> </StrictMode>, ) 如果是自己搭建的系统，在main.tsx 入口文件中把严格模式去掉，StrictMode 去掉这个包裹后正常显示

FlowerTip avatar Sep 12 '24 08:09 FlowerTip

膈应警告就 pnpm add [email protected] [email protected]

zcSkr avatar Sep 26 '24 05:09 zcSkr

+1 全是最新的demo 项目 问题依旧存在 "@ant-design/pro-components": "^2.7.19", "antd": "^5.21.1", "react": "^18.3.1",

Kitercc avatar Sep 27 '24 10:09 Kitercc

"dependencies": { "@ant-design/charts": "^2.2.1", "@ant-design/icons": "^5.5.1", "@ant-design/pro-components": "^2.7.19", "antd": "^5.21.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.2", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "umi-plugin-keep-alive": "^0.0.1-beta.35" }, 可破

keer6 avatar Oct 10 '24 07:10 keer6

"dependencies": { "@ant-design/charts": "^2.2.1", "@ant-design/icons": "^5.5.1", "@ant-design/pro-components": "^2.7.19", "antd": "^5.21.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.2", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "umi-plugin-keep-alive": "^0.0.1-beta.35" }, 可破

没用的

w1687021088 avatar Oct 23 '24 09:10 w1687021088

"dependencies": { "@ant-design/charts": "^2.2.1", "@ant-design/icons": "^5.5.1", "@ant-design/pro-components": "^2.7.19", "antd": "^5.21.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.2", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", "umi-plugin-keep-alive": "^0.0.1-beta.35" }, 可破

没用的

是我疏忽了，后面证实是ant-pro的问题。在ant是已经解决了的。

keer6 avatar Oct 23 '24 09:10 keer6

see https://github.com/ant-design/pro-components/discussions/8837

resetsix avatar Oct 29 '24 11:10 resetsix

react-19-upgrade-guide React 18.3 has also been published To help make the upgrade to React 19 easier, we’ve published a [email protected] release that is identical to 18.2 but adds >>> warnings for deprecated APIs and other changes that are needed for React 19.

We recommend upgrading to React 18.3 first to help identify any issues before upgrading to React 19.

For a list of changes in 18.3 see the Release Notes.

把react升级到18.2.0就能解决问题，18.3.0是添加了警告的版本，与18.2.0没区别。

zhe-he avatar Dec 13 '24 08:12 zhe-he