ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

🐛[BUG] React.StrictMode 下导致 OrganizationGraph 的重复出现

Open Nativu5 opened this issue 2 years ago • 2 comments

🐛 bug 描述 [详细地描述 bug,让大家都能理解]

对于 OrganizationGraph 的例子,如果父组件为 <React.StrictMode> 会导致 OrganizationGraph 在页面上重复出现。

📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]

  1. 使用 CRA 初始化一个项目。将 index.js 改为:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import { DemoOrganizationGraph } from './chart';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <DemoOrganizationGraph />
  </React.StrictMode>
);
  1. 新建 chart.js:
import React from 'react';
import { OrganizationGraph } from '@ant-design/graphs';

export const DemoOrganizationGraph = () => {
此处省略,内容与官方文档中的实例完全相同。
}
  1. 查看渲染效果: image

🏞 期望结果 [描述你原本期望看到的结果]

如上图,图表出现了两次。

期望只出现一次。

💻 复现代码 [提供可复现的代码,仓库,或线上示例]

复现代码如上。 经过测试发现,只要去掉 <React.StrictMode> 就能正确渲染。

© 版本信息

  • ant-design-charts 版本: 1.3.6
  • 浏览器环境:Microsoft Edge 版本 101.0.1210.32 (正式版本) (64 位)
  • 开发环境:Windows 11 x64

🚑 其他信息 [如截图等其他信息可以贴在这里]

截图如上。

Nativu5 avatar May 04 '22 09:05 Nativu5

有什么解决方式么?似乎关系图都有这个问题

hhbusui avatar Jun 22 '22 02:06 hhbusui

请问这个问题有没有解决方案呢?React版本 18.2.0

wsy19961129 avatar Aug 23 '22 13:08 wsy19961129

https://github.com/ant-design/ant-design-charts/issues/1554

lxfu1 avatar Sep 08 '22 02:09 lxfu1