ant-design-charts
ant-design-charts copied to clipboard
🐛[BUG] React.StrictMode 下导致 OrganizationGraph 的重复出现
🐛 bug 描述 [详细地描述 bug,让大家都能理解]
对于 OrganizationGraph 的例子,如果父组件为 <React.StrictMode>
会导致 OrganizationGraph 在页面上重复出现。
📷 复现步骤 [清晰描述复现步骤,让别人也能看到问题]
- 使用 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>
);
- 新建 chart.js:
import React from 'react';
import { OrganizationGraph } from '@ant-design/graphs';
export const DemoOrganizationGraph = () => {
此处省略,内容与官方文档中的实例完全相同。
}
- 查看渲染效果:
🏞 期望结果 [描述你原本期望看到的结果]
如上图,图表出现了两次。
期望只出现一次。
💻 复现代码 [提供可复现的代码,仓库,或线上示例]
复现代码如上。
经过测试发现,只要去掉 <React.StrictMode>
就能正确渲染。
© 版本信息
- ant-design-charts 版本: 1.3.6
- 浏览器环境:Microsoft Edge 版本 101.0.1210.32 (正式版本) (64 位)
- 开发环境:Windows 11 x64
🚑 其他信息 [如截图等其他信息可以贴在这里]
截图如上。
有什么解决方式么?似乎关系图都有这个问题
请问这个问题有没有解决方案呢?React版本 18.2.0
https://github.com/ant-design/ant-design-charts/issues/1554