🐛[BUG]【ProTable】findDOMNode is deprecated and will be removed in the next major release.

[Aslan-Monster]

提问前先看看：

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

🐛 bug 描述

正常情况下会出现“findDOMNode is deprecated and will be removed in the next major release.”警告，设置search和options为false后控制台报错消失

🏞 期望结果

有什么解决办法可以去除此警告

💻 复现代码

import React from "react"; import type { ActionType, ProColumns } from "@ant-design/pro-components"; import { ProTable } from "@ant-design/pro-components"; import { useRef } from "react";

const Demo = () => { const actionRef = useRef<ActionType>(); const columns: ProColumns[] = [ { dataIndex: "index", valueType: "indexBorder", width: 48, }, { title: "角色编码", key: "code", dataIndex: "code", }, { title: "角色名称", key: "name", dataIndex: "name", }, { title: "角色描述", key: "description", dataIndex: "description", }, ]; return ( <ProTable columns={columns} actionRef={actionRef} cardBordered request={async () => { return { data: [ { id: 1, code: 1, name: "test", description: "测试", }, ], success: true, }; }} //search={false} //options={false} rowKey="id" pagination={{ pageSize: 5, onChange: (page) => console.log(page), }} dateFormatter="string" /> ); };

export default Demo;

© 版本信息

"@ant-design/pro-components": "^2.8.1", "antd": "^5.21.5", "react": "^18.2.0", "react-dom": "^18.2.0",

🚑 其他信息

[github-actions[bot]]

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

• [#8752][findDOMNode is deprecated and will be removed in the next major release.][94%]
• [#8685][🧐[问题] QueryFilter组件 findDOMNode is deprecated and will be removed in the next major release][77%]
• [#8686][🐛[BUG] pro-layout 报警告 findDOMNode is deprecated and will be removed in the next major release.][64%]

[resetsix]

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

[XuChaow]

react 版本降低一下

[SilentFlute]

我也遇到了这个问题, 把和antd相关的依赖以及pro-components都升级和降级都试了, 都不行, 醉了...

[InfernalAzazel]

仍然没有解决官方的实例都用这个错误

https://codesandbox.io/p/sandbox/ghx8my

[InfernalAzazel]

一顿操作猛如虎， https://github.com/ant-design/pro-components/discussions/8837 解决不了 一下实现隐蔽的方法 utils\setupGlobalErrorHandling.ts

import {ReactNode, useEffect} from 'react';

export function ErrorBoundary({ children}: { children: ReactNode }) {
    useEffect(() => {
        console.error = (...args) => {
            // 定义需要过滤的关键词数组
            const filterKeywords = [
                'findDOMNode',
                // 可以在此添加更多的关键词
            ];
            if (typeof args[0] === 'string' && filterKeywords.some(keyword => args[0].includes(keyword))) {
                return;
            }
        };

    }, []);
    return children;
}

在程序入口设置，我的是 remix 框架为例:

import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import {ErrorBoundary} from "~/utils/setupGlobalErrorHandling";

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
        <ErrorBoundary > // <--------- 这个是添加的异常过滤
            <RemixBrowser />
        </ErrorBoundary>
    </StrictMode>
  );
});

效果:

[coder-sunshine]

升级降级依赖都试了 还是不行