Doughnut图表报错排查：页面刷新时出现未定义属性相关错误

错误现象 #

• Cannot set properties of undefined (setting '_listened')
• TypeError: Cannot read properties of undefined (reading '_labels')

核心问题分析 #

已确认核心原因是图表组件尝试读取未定义对象的labels字段，进而抛出异常。

疑问 #

从其他页面跳转至图表页面时功能正常（内容已提前渲染），但刷新当前页面就触发错误，这是为什么？

所用Doughnut组件代码 #

<Doughnut
    data={
        {
            labels: chartsData.labels || [''],
            datasets: [
                {
                    data: chartsData.data || [],
                    backgroundColor: colors || [],
                    borderColor: colors || [],
                    borderWidth: 1,
                },
            ],
        }
    }
    options={{
        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                display: false
            },
        }
    }}
/>

已尝试方案 #

已尝试确保所有字段都有完整数据，即使服务器返回null或空数组，但问题仍未解决。

可能的解决方向 #

1. 确保chartsData本身不为undefined
   当前代码仅处理了chartsData.labels为空的情况，但如果chartsData本身未初始化（为undefined），直接访问chartsData.labels会触发报错。可以修改为可选链访问：

   labels: chartsData?.labels || [''],
   data: chartsData?.data || [],
   

   或者在渲染图表前先判断chartsData是否存在：

   {chartsData ? (
       <Doughnut ... />
   ) : (
       <div>数据加载中...</div>
   )}
   

2. 处理异步数据加载时序问题
   页面跳转时，数据可能已存在于全局状态或缓存中，组件渲染时chartsData已有值；但刷新页面时，数据需要重新从服务器请求，组件在数据返回前就开始渲染，此时chartsData仍为undefined，导致报错。

   可以通过以下方式优化：

   • 在组件中维护加载状态，等待数据请求完成后再渲染图表
   • 给chartsData设置初始默认值，比如：

     const [chartsData, setChartsData] = useState({ labels: [], data: [] });
     

3. 检查colors变量的初始值
   虽然代码中用了colors || []，但如果colors为undefined，会导致backgroundColor和borderColor为空数组，某些场景下可能引发图表渲染异常。可以给colors设置默认初始值，比如：

   const colors = colorsProp || ['#FF6384', '#36A2EB', '#FFCE56']; // 示例默认颜色
   

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