React中react-google-charts的GeoChart渲染不稳定问题

针对你使用react-google-charts构建GeoChart时出现的渲染不稳定问题，以下是代码中的核心问题及修复方案：

核心问题点 #

1. 初始数据结构异常：组件挂载时config可能未就绪，导致初始data的表头为undefined，GeoChart无法识别有效数据结构。
2. 数据更新逻辑错误：依赖变化时基于旧数据拼接新数据，易造成数据重复或结构混乱；未处理rows为空的边界情况。
3. 无效的数据判断：data?.length < 0永远不成立，数组长度不可能为负数，无法正确判断无数据状态。
4. 颜色配置嵌套错误：colors配置被额外嵌套一层数组，不符合GeoChart的参数要求。
5. Flex布局属性错误：flexDirection: 'center'是无效属性，导致容器布局异常可能影响图表渲染。

修复后的完整代码 #

import React, { useState, useEffect } from 'react';
import { Box, Typography } from '@mui/material';
import Chart from 'react-google-charts';

function GeoChart({ rows, config, onConfigChange }) {
  const [columns, setColumns] = useState([]);
  const [data, setData] = useState([]);

  // 修正颜色配置：直接使用chartColors数组，避免嵌套
  const options = {
    colorAxis: {
      minValue: 0,
      colors: config?.chartColors?.length > 0 ? config.chartColors : ['#E0E0E0', '#1A73E8']
    }
  };

  useEffect(() => {
    setColumns(rows[0] ? Object.keys(rows[0]) : []);
  }, [rows]);

  useEffect(() => {
    // 提前校验必要参数，避免无效数据生成
    if (!config?.keyColumn || !config?.valueColumn || !rows?.length) {
      setData([]);
      return;
    }
    // 重新构建完整数据结构：表头 + 数据行
    const newData = [
      [config.keyColumn, config.valueColumn],
      ...rows.map(row => [row[config.keyColumn], row[config.valueColumn]])
    ];
    setData(newData);
  }, [rows, config?.keyColumn, config?.valueColumn]);

  return (
    <Box sx={{ width: '100%', height: '100%', p: 1 }}>
      <Box
        sx={{
          height: '90%',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center', // 修正为正确的布局属性
          px: 1,
          mt: 2
        }}
      >
        {/* 正确判断无有效数据的情况 */}
        {data.length <= 1 ? (
          <Typography>无有效数据</Typography>
        ) : (
          <Chart
            width={'100%'}
            height={'100%'}
            chartType="GeoChart"
            data={data}
            options={options}
            mapsApiKey="API KEY"
            loader={<div>加载中...</div>} {/* 添加加载提示优化体验 */}
          />
        )}
      </Box>
    </Box>
  );
}

export default GeoChart;

额外排查建议 #

• API密钥权限：确保你的Google Maps API密钥已启用Google Maps JavaScript API和Geocoding API，且无错误的IP/域名限制。
• 组件稳定性：给GeoChart组件添加唯一key（如key={geo-chart-${config.keyColumn}-${config.valueColumn}}），确保配置变化时组件重新初始化。
• 容器尺寸：检查外层容器的高度是否正确设置，避免因容器高度为0导致图表无法渲染。

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