search

ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.33k stars 1.36k forks source link

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

Open freesaber opened 3 months ago

freesaber commented 3 months ago

开发环境：

页面代码：

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

fnoopv commented 3 months ago
  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
milo-xiaomeng commented 3 months ago
  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"
}
jiazez commented 3 months ago

image

JJJW59 commented 3 months ago 
    "@ant-design/pro-components": "^2.7.15",
    "antd": "^5.20.1",
    "next": "^14.2.4",
    "react": "^18",

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

0x457 commented 3 months ago

顶一下，我也是，看着不舒服： "@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",

zhengmenghuang commented 3 months ago

+1

bxter commented 2 months ago

+1

ychost commented 2 months ago

+1

echoyl commented 2 months ago

+1

wangkai942901902 commented 2 months ago

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

researchlab commented 2 months ago

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

FlowerTip commented 2 months ago

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(

, ) 如果是自己搭建的系统，在main.tsx 入口文件中把严格模式去掉，StrictMode 去掉这个包裹后正常显示
zcSkr commented 2 months ago

膈应警告就 pnpm add react@18.2.0 react-dom@18.2.0

Kitercc commented 1 month ago

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

keer6 commented 1 month ago

"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 commented 1 month ago

"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 commented 1 month ago

"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是已经解决了的。

resetsix commented 3 weeks ago

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