如何阻止ChartJS/react-chartjs-2图表重复渲染已添加折线

问题原因 #

通过React状态更新ChartJS数据集时，若每个数据集没有稳定的唯一标识（如label、id），react-chartjs-2在对比新旧数据时无法区分已有数据集与新增数据集，会重新渲染所有数据集，导致已存在的折线出现消失后重新加载的视觉问题。

解决方案 #

给每个新增的数据集添加唯一标识属性（如label），让React能准确识别已有数据集，仅渲染新增部分。

修改后的代码 #

const chartOptions = {
  showLine: true,
  plugins: {
    legend: {
      display: false,
    },
    tooltip: {
      enabled: false,
    },
  },
};

function defaultChartData() {
  return {
    datasets: [
      {
        label: "Line 1", // 给初始数据集添加标识
        data: [
          { x: 1, y: 1 },
          { x: 10, y: 10 },
        ],
      },
    ],
  };
}

export default function App() {
  const chartRef = useRef(null);
  const [chartData, setChartData] = useState(defaultChartData());

  useEffect(() => {
    function handleMouseDown(e) {
      setChartData((prevChartData) => {
        const newLine = {};
        // 给新数据集添加唯一label
        newLine.label = `Line ${prevChartData.datasets.length + 1}`;
        if (prevChartData.datasets.length === 1) {
          newLine.data = [
            { x: 3, y: 2 },
            { x: 3, y: 7 },
          ];
        } else {
          newLine.data = [
            { x: 5, y: 2 },
            { x: 5, y: 7 },
          ];
        }
        return {
          ...prevChartData,
          datasets: [...prevChartData.datasets, newLine],
        };
      });
    }
    if (chartRef && chartRef.current) {
      const canvas = chartRef.current.canvas;
      canvas.addEventListener("mousedown", handleMouseDown);
      return () => {
        canvas.removeEventListener("mousedown", handleMouseDown);
      };
    }
  }, [chartRef]);

  return <Scatter ref={chartRef} options={chartOptions} data={chartData} />;
}

关键修改点 #

1. 给初始数据集添加label: "Line 1"
2. 每次生成新数据集时，通过prevChartData.datasets.length + 1生成唯一的label值

react-chartjs-2会依据label识别已有数据集，仅渲染新增的第三条折线，不会重新渲染第二条折线，从而解决重复渲染问题。

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