React-google-Charts报‘Table has no columns’错误，请求技术排查

问题现象 #

使用React-google-Charts构建Column Chart时，出现"Table has no columns"错误，API数据无法正常展示。控制台输出的数据存在嵌套数组问题，自行添加的校验代码未触发错误提示。

错误原因分析 #

1. 数据格式错误：控制台输出显示每个数据行都被额外嵌套了一层数组（如[["deisemorais", 18, "#e5e4e2"]]），但React-google-Charts要求的数据行应为一维数组（如["deisemorais", 18, "#e5e4e2"]），这种嵌套导致图表无法识别有效数据列。
2. 初始状态类型错误：chartData初始化为{}（对象），但图表数据应为数组类型，初始类型不匹配可能引发渲染异常。
3. 校验逻辑无效：现有校验代码仅判断表头数组长度，而表头本身是正常的，未针对数据行的有效性做检查，因此无法触发错误提示。

解决方案 #

1. 修正数据处理逻辑：修改map函数，移除数据行的多余数组嵌套。
2. 调整初始状态：将chartData初始值设为[]（空数组）。
3. 优化校验逻辑：检查数据行是否存在，确保图表有有效数据可渲染。

修改后的完整代码 #

import React, { useEffect, useState } from "react";
import { ColumnChart } from "./components/graficos-modelos/ColumnChart/ColumnChart";
import api from "./service/api";

const App = () => {
  // 初始状态设为空数组，匹配图表数据类型
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await api();
        const data = response.data;
        const solicitantes = {};
     
        data.body.forEach(element => {
          const solicitante = element["SOLICITANTE"];
          if (solicitante in solicitantes) {
            solicitantes[solicitante] += 1;
          } else {
            solicitantes[solicitante] = 1;
          }
        });
      
        // 移除map返回值中的多余数组嵌套
        const dataForChart = [['Solicitante', 'Quantidade', { role: "style" }]].concat(
          Object.entries(solicitantes).map(([solicitante, value]) => [ solicitante, value, "#e5e4e2" ])
        );
        
        // 优化校验：检查是否有数据行
        if (dataForChart.length > 1) {
          setChartData(dataForChart);
        } else {
          console.error("无有效数据行，无法渲染图表。");
        }

      } catch (error) {
        console.error(error);
      }
    };
  
    fetchData();
  }, []);

  return (
    <div>
      <h1>Grafics in React</h1>
      <ColumnChart data={chartData} />
    </div>
  );
};

export default App;

说明 #

• 修改map函数后，数据行将变为符合要求的一维数组，图表可正确识别数据列。
• 初始状态改为空数组，避免类型不匹配导致的渲染问题。
• 新的校验逻辑通过判断dataForChart.length > 1（表头+至少一行数据），确保图表有有效数据时才更新状态，否则输出错误提示。

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