React按条件切换导入的JSON文件渲染谷歌地图对应标记

报错原因 #

你通过import * as xxx方式导入JSON文件时，拿到的是模块对象，实际的JSON内容存在该对象的default属性下，直接把模块对象存入数组调用时，找不到你需要的crimes字段，进而触发类型/结构错误。

修复步骤 #

1. 修正数据源数组构造 #

二选一即可：

• 方案A：修改所有分类JSON的导入语句，改为默认导入直接拿到JSON本体

// 把所有 import * as xxx from 改为 import xxx from
import aggAssault from "../resources/categories/AGG_ASSAULT.json";
import autoTheft from "../resources/categories/AUTO_THEFT.json";
// 其他分类同理修改

修改后原数组构造代码无需调整即可正常使用。

• 方案B：不修改导入语句，构造数组时取default属性

const array= [
  aggAssault.default, 
  autoTheft.default, 
  burglaryNonres.default, 
  burglaryResidence.default, 
  homocide.default, 
  larcenyFromVehicle.default, 
  larcenyNonVehicle.default, 
  rape.default, 
  robberyCommercial.default, 
  robberyPedestrian.default, 
  robberyResidence.default 
]

2. 实现按条件切换数据源 #

通过状态变量控制选中的分类即可，示例代码如下：

import { useState } from 'react';

function Map() {
  // 约定selectedCategory为-1时使用全量数据，0到10对应分类数组的下标
  const [selectedCategory, setSelectedCategory] = useState(-1);
  // 动态获取当前使用的数据源
  const currentData = selectedCategory === -1 ? crimeData : array[selectedCategory];

  return (
    <>
      {/* 分类切换按钮组，可根据需求扩展 */}
      <div className="category-switch">
        <button onClick={() => setSelectedCategory(-1)}>全量数据</button>
        <button onClick={() => setSelectedCategory(0)}>严重伤害</button>
        <button onClick={() => setSelectedCategory(1)}>机动车盗窃</button>
        {/* 其余分类按钮按顺序补充即可 */}
      </div>
      <GoogleMap 
        defaultZoom={10}
        defaultCenter= {{lat: 33.8547, lng: -84.38895}}
      >
        {currentData.crimes.map((crime, index) => (
          // 注意不要用Math.random当key，会导致标记频繁重绘，优先用数据里的唯一id，没有的话暂用index
          <Marker 
            key={crime.id || index} 
            position = {{lat: parseFloat(crime.lat), lng: parseFloat(crime.long)}} 
          />
        ))}
      </GoogleMap>
    </>
  );
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

3. TypeScript类型报错补充（如果使用TS） #

给数组加上明确的类型定义即可消除类型错误，示例：

interface CrimeEntry {
  lat: string;
  long: string;
  // 补充你的数据里的其他字段
}
interface CrimeDataSource {
  crimes: CrimeEntry[];
}
// 给数组加上类型注解
const array: CrimeDataSource[] = [
  aggAssault.default as CrimeDataSource,
  autoTheft.default as CrimeDataSource,
  // 其余元素同理
]

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