React-ApexCharts环形图渲染报错求助：TypeError读取toString失败

问题分析 #

该错误是Next.js环境下react-apexcharts的初始化时机与客户端组件渲染流程不匹配导致的——首次挂载时图表内部某个未完成初始化的变量触发了toString调用，而修改属性后图表重新渲染时，相关变量已就绪，因此能正常显示。

解决方案 #

以下是几种可行的修复方案，按优先级排序：

1. 延迟渲染图表，确保DOM就绪

通过添加加载状态，等待组件挂载完成后再渲染图表，规避初始化阶段的DOM未就绪问题：

"use client";
import { ApexOptions } from "apexcharts";
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
const ReactApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });

interface ChartThreeState {
    series: number[];
}

const options: ApexOptions = {
    chart: {
        type: "donut",
    },
    colors: ["#85b473f8", "#183d6df8"],
    labels: ["Verwendete Benefits", "Noch verfügbare Benefits"],
    legend: {
        show: true,
        position: "bottom",
    },
    plotOptions: {
        pie: {
            donut: {
                size: "65%",
                background: "transparent",
            },
        }, 
    },
    dataLabels: {
        enabled: false,
    },
    responsive: [
        {
            breakpoint: 2600,
            options: {
                chart: {
                    width: 380,
                },
            },
        },
        {
            breakpoint: 640,
            options: {
                chart: {
                    width: 200,
                },
            },
        },
    ],
};

const Chart: React.FC = () => {
    const [state, setState] = useState<ChartThreeState>({
        series: [2, 0]
    });
    const [chartLoaded, setChartLoaded] = useState(false);

    useEffect(() => {
        // 组件挂载后再渲染图表
        setChartLoaded(true);
    }, []);

    return (
        <div className="pt-4 col-span-12 ring-1 ring-secondary mx-0 rounded-lg border border-secondary bg-white px-5 pb-5 shadow-default sm:px-7.5 xl:col-span-6">
            <div className="mb-3 justify-between gap-4 sm:flex">
                <div>
                    <h5 className="text-xl font-semibold text-primary">
                        Nutzung
                    </h5>
                </div>
            </div>

            <div className="mb-2">
                <div id="chartThree" className="mx-auto flex justify-center">
                    {chartLoaded && (
                        <ReactApexChart
                            options={options}
                            series={state.series}
                            width="100%"
                            type="donut"
                        />
                    )}
                </div>
            </div>
        </div>
    );
};

export default Chart;

2. 调整初始series值，规避零值触发的内部异常

部分场景下，series包含0会导致ApexCharts内部计算出现未定义变量，可将初始零值替换为极小非零值：

const [state, setState] = useState<ChartThreeState>({
    series: [2, 0.001] // 用0.001替代0
});

3. 将options移入组件内部，避免外部常量引用问题

把options定义移到Chart组件内部，确保每次渲染时都能获取到最新的配置对象：

const Chart: React.FC = () => {
    const [state, setState] = useState<ChartThreeState>({
        series: [2, 0]
    });
    // 将options移入组件内部
    const options: ApexOptions = {
        chart: {
            type: "donut",
        },
        colors: ["#85b473f8", "#183d6df8"],
        labels: ["Verwendete Benefits", "Noch verfügbare Benefits"],
        legend: {
            show: true,
            position: "bottom",
        },
        plotOptions: {
            pie: {
                donut: {
                    size: "65%",
                    background: "transparent",
                },
            }, 
        },
        dataLabels: {
            enabled: false,
        },
        responsive: [
            {
                breakpoint: 2600,
                options: {
                    chart: {
                        width: 380,
                    },
                },
            },
            {
                breakpoint: 640,
                options: {
                    chart: {
                        width: 200,
                    },
                },
            },
        ],
    };

    // 其余代码不变
};

验证方式 #

应用方案后刷新页面，若初始化错误消失，且修改属性后图表仍能正常渲染，则问题已解决。

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