解决React Google Chart报错：“轴#0的数据列不能为字符串类型”

问题根源 #

你用let声明bmiData而非React状态，导致数据更新时组件无法感知并触发重绘；同时直接往初始数组push数据可能残留旧数据，加上初始表头命名不符合Google Charts的预期，最终触发类型报错。

修复步骤 #

1. 改用useState管理图表数据 #

把bmiData改成React状态，确保数据变化时组件自动更新：

import { useState, useEffect } from 'react';

// 初始化表头和静态结构，和静态数据保持一致
const [bmiData, setBmiData] = useState([["Year", "index"]]);

2. 重新构建动态数据，避免残留旧值 #

在useEffect里每次重新生成完整的数组，而不是往原数组push：

useEffect(()=>{
    if (clinicEntries.length === 0) return;

    // 从表头开始重新构建数组
    const newBmiData = [["Year", "index"]];
    clinicEntries.forEach((item: ClinicEntry) => {
        // 验证日期有效性，避免无效字符串
        const date = new Date(item.dateAdd);
        if (isNaN(date.getTime())) return; // 跳过无效日期
        
        const month = date.toLocaleString('default', { month: 'short' });
        // 确保bodyMassIndex是数值类型，强制转换避免字符串
        const bmi = Number(item.bodyMassIndex);
        if (!isNaN(bmi)) { // 跳过无效BMI值
            newBmiData.push([month, bmi]);
        }
    });
    setBmiData(newBmiData);
}, [clinicEntries])

3. 额外验证点 #

• 确认clinicEntries中的dateAdd是标准日期格式（如ISO字符串），避免new Date()解析失败。
• 确保bodyMassIndex返回的是数值而非字符串，即使后端返回字符串，也要用Number()转换后再传入图表。

这样修改后，bmiData的结构和静态数据完全一致，且状态变化能触发组件重绘，Google Chart就能正常渲染了。

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