使用@weknow/react-bubble-chart-d3报错：无法在已卸载组件上找到节点

这个错误主要由库与React18并发渲染不兼容、窗口尺寸频繁变化引发重渲染、数据类型不一致这三个原因导致，以下是针对性解决方案：

1. 修复数据类型不一致问题 #

数据中Front End的value为字符串类型，与其他数字类型的value冲突，会导致D3计算异常，间接触发DOM操作错误，修正为数字：

data={[
  // ... 其他数据项
  { label: "Front End", value: 26 }, // 将"26"改为26
  { label: "Content", value: 26 },
]}

2. 防抖窗口尺寸变化+卸载时清理D3操作 #

useScreenSize会频繁触发重渲染，导致组件反复挂载/卸载，D3的异步操作在组件卸载后仍试图操作DOM。通过防抖减少重渲染次数，并在组件卸载时清理D3相关资源：

import React, { useEffect, useRef, useState } from "react";
import BubbleChart from "@weknow/react-bubble-chart-d3";
import useScreenSize from "use-screen-size";

export default function BubbleChartRBC() {
  const size = useScreenSize();
  const [chartWidth, setChartWidth] = useState(size.width);
  const chartContainerRef = useRef(null);

  // 防抖处理窗口尺寸变化，降低重渲染频率
  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      setChartWidth(size.width);
    }, 200);
    return () => clearTimeout(debounceTimer);
  }, [size.width]);

  // 组件卸载时清理D3的DOM操作和事件监听
  useEffect(() => {
    return () => {
      if (chartContainerRef.current) {
        const svgElement = chartContainerRef.current.querySelector("svg");
        if (svgElement) {
          // 清空SVG内容并移除D3绑定的事件
          svgElement.innerHTML = "";
          window.d3?.select(svgElement).on("zoom", null);
        }
      }
    };
  }, []);

  const bubbleClick = (label) => {
    console.log("Custom bubble click func");
  };
  const legendClick = (label) => {
    console.log("Customer legend click func");
  };

  return (
    <div ref={chartContainerRef}>
      <BubbleChart
        graph={{ zoom: 1 }}
        width={chartWidth}
        height={1300}
        padding={0}
        showLegend={false}
        legendPercentage={20}
        legendFont={{
          family: "Arial",
          size: 12,
          color: "#000",
          weight: "bold",
        }}
        valueFont={{
          family: "Arial",
          size: 12,
          color: "#fff",
          weight: "bold",
        }}
        labelFont={{
          family: "Arial",
          size: 16,
          color: "#fff",
          weight: "bold",
        }}
        bubbleClickFunc={bubbleClick}
        legendClickFun={legendClick}
        data={[
          { label: "CRM", value: 1 },
          { label: "API", value: 1 },
          { label: "Data", value: 1 },
          { label: "Commerce", value: 1 },
          { label: "AI", value: 3 },
          { label: "Management", value: 5 },
          { label: "Testing", value: 6 },
          { label: "Mobile", value: 9 },
          { label: "Conversion", value: 9 },
          { label: "Misc", value: 21 },
          { label: "Databases", value: 22 },
          { label: "DevOps", value: 22 },
          { label: "Javascript", value: 23 },
          { label: "Languages / Frameworks", value: 25 },
          { label: "Front End", value: 26 },
          { label: "Content", value: 26 },
        ]}
      />
    </div>
  );
}

3. 临时降级React版本（快速修复） #

@weknow/react-bubble-chart-d3 v1.0.12未适配React18的并发渲染，降级到React17可直接解决兼容性问题：
修改package.json中的依赖：

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

执行npm install或yarn install完成降级。

4. 替换为兼容React18的库（长期方案） #

该库已长时间未更新，建议替换为维护活跃的替代方案，比如：

• 直接使用D3.js手动实现气泡图
• 使用react-d3-cloud等适配React18的可视化库

内容的提问来源于stack exchange，提问作者Muhammad Bilal