React删除dataCategories时出现Uncaught (in promise) TypeError报错求助

报错原因分析 #

你遇到的Cannot read properties of undefined (reading 'slice')错误，核心原因是删除最后一组dataCategories后，某个依赖xAxisData[0]的逻辑试图调用slice()方法，但此时xAxisData[0]已经是undefined。

从你提供的数据来看，初始状态下xAxisData是长度为1的数组，删除唯一的一组dataCategories后，xAxisData会被splice成空数组。此时如果图表渲染逻辑（或你的其他关联代码）直接访问xAxisData[0].slice()，就会触发这个报错——而删除dataValues时yAxisData变成空数组却正常，大概率是因为图表对y轴数据的容错逻辑比x轴更宽松（比如允许y轴无数据，但强制要求x轴必须有基础数据结构）。

验证步骤 #

1. 打开浏览器控制台的调用栈，找到触发slice()的具体位置：
   • 如果是第三方图表库（比如ECharts）的代码，说明库对x轴数据的格式要求更严格；
   • 如果是你的自定义代码，直接定位到对应位置补做空值判断即可。
2. 在删除dataCategories后，立即打印chart.data[0].xAxisData，确认它是否变成了空数组。

解决方案 #

根据场景选择以下任意一种：

方案1：禁止删除最后一组分类数据 #

在删除前判断分类数据的长度，避免xAxisData被清空：

else if (type === 'dataCategories') {
  const indexToRemove = chart.dataCategories.findIndex((inputGroup) => inputGroup.key === groupId);
  // 新增判断：如果只剩最后一组，不执行删除
  if (chart.dataCategories.length === 1) {
    alert('至少保留一组分类数据');
    return;
  }
  if (indexToRemove !== -1) {
    chart.data[0].datasetX.splice(indexToRemove, 1);
    chart.data[0].xAxisData.splice(indexToRemove, 1);
  }
  chart.dataCategories = chart.dataCategories.filter((inputGroup) => inputGroup.key !== groupId);
}

方案2：维护xAxisData的基础结构 #

删除后如果xAxisData为空，自动添加一个空数组作为占位：

else if (type === 'dataCategories') {
  const indexToRemove = chart.dataCategories.findIndex((inputGroup) => inputGroup.key === groupId);
  if (indexToRemove !== -1) {
    chart.data[0].datasetX.splice(indexToRemove, 1);
    chart.data[0].xAxisData.splice(indexToRemove, 1);
    // 新增：如果xAxisData为空，补一个空数组
    if (chart.data[0].xAxisData.length === 0) {
      chart.data[0].xAxisData.push([]);
    }
  }
  chart.dataCategories = chart.dataCategories.filter((inputGroup) => inputGroup.key !== groupId);
}

方案3：在图表渲染层补做空值判断 #

如果是图表配置中直接使用xAxisData[0]，改成可选链访问：

// 假设原来的图表配置是：
xAxis: {
  data: xAxisData[0].slice()
}
// 改成：
xAxis: {
  data: xAxisData[0]?.slice() || []
}

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