使用PapaParse加载数据的Geocharts地图遇ReferenceError问题求助

我正在开发一款借助PapaParse导入数据的Geocharts地图，当前遇到的问题是在处理数据时出现ReferenceError错误，涉及代码行（原错误写法）temp = CovidData.data.find(element[1] === countries[c]);。我使用PapaParse库解析从GitHub获取的CSV文件，具体代码如下：

google.charts.load('current', { 'packages':['geochart'], });
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
  Papa.parse('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv',{
    download: true,
    complete: function(results) {var CovidData=results;}});
  countries = ["France","Germany", "United Kingdom", "US", "Italy"];
  var mapData = [{label: 'Country', type: 'string'}, 'Density',{label: 'Infected', type: 'number'}];
  for(c in countries) {
    var temp = CovidData.data.find(element => element[0] === "" && element[1] === countries[c]);
    mapData.push([countries[c],1,temp[temp.length-1]);
  }
  var data = google.visualization.arrayToDataTable(mapData);
  var options = {
    colorAxis: {colors: ['green','blue', 'red','black'], maxValue: 1},
    datalessRegionColor: 'grey',
    defaultColor: '#f5f5f5',
    callback: drawRegionsMap,
  };
  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
  chart.draw(data);
}

错误原因分析 #

• 异步执行导致变量未定义：PapaParse的parse方法是异步的，complete回调会在CSV下载解析完成后才执行，但你在回调外部直接就去访问CovidData变量了——这时候回调还没触发，CovidData根本没被定义，所以抛出ReferenceError。
• 语法错误：mapData.push([countries[c],1,temp[temp.length-1]);这行少了一个闭合的方括号，会导致语法解析错误，影响代码执行。
• 潜在的undefined风险：即使CovidData能正常获取，find方法可能找不到匹配的元素，返回undefined，这时候访问temp[temp.length-1]会再次报错。

解决方法 #

核心是把所有依赖解析后数据的逻辑移到complete回调内部，确保数据加载完成后再处理，同时修复语法问题并增加异常处理：

修正后的完整代码：

google.charts.load('current', { 'packages':['geochart'], });
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  const countries = ["France","Germany", "United Kingdom", "US", "Italy"];
  
  Papa.parse('https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv',{
    download: true,
    complete: function(results) {
      const CovidData = results;
      const mapData = [
        {label: 'Country', type: 'string'}, 
        'Density',
        {label: 'Infected', type: 'number'}
      ];
      
      for(const country of countries) {
        // 查找匹配的国家数据，处理可能的undefined情况
        const temp = CovidData.data.find(element => element[0] === "" && element[1] === country);
        const infectedCount = temp ? temp[temp.length - 1] : 0; // 找不到数据时用0填充
        mapData.push([country, 1, infectedCount]);
      }
      
      const data = google.visualization.arrayToDataTable(mapData);
      const options = {
        colorAxis: {colors: ['green','blue', 'red','black'], maxValue: 1},
        datalessRegionColor: 'grey',
        defaultColor: '#f5f5f5',
      };
      
      const chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
      chart.draw(data);
    }
  });
}

关键修改点说明：

1. 将countries定义、mapData构建、图表绘制等所有依赖CovidData的代码都移到了complete回调内部，确保只有在CSV数据解析完成后才执行这些逻辑。
2. 把for...in循环改成了for...of，更适合遍历数组，避免遍历到数组原型上的额外属性。
3. 增加了对temp是否为undefined的判断，找不到对应国家数据时用0填充感染数，避免后续报错。
4. 修复了mapData.push的语法错误，补上了闭合方括号。
5. 移除了options里多余的callback: drawRegionsMap，避免不必要的重复调用。

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