🐛[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();
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]

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

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

[resetsix]

see #8837

[XuChaow]

react 版本降低一下

[SilentFlute]

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

[InfernalAzazel]

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

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

[InfernalAzazel]

一顿操作猛如虎， #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>
  );
});

效果: