React导入本地JSON实现州郡联动下拉时JSON.parse报错如何解决？

错误根因 #

你遇到的报错是因为React生态的打包工具（webpack/Vite等）已经自动将导入的JSON文件解析为原生JS数组/对象，不需要手动调用JSON.parse，JSON.parse仅支持接收字符串参数，传入JS对象自然会抛出类型转换错误。

此外你的代码还有两处额外错误需要同步修正：

• JSON文件导入方式错误，import * as data会把JSON内容包裹在default属性下，应该直接用默认导入语法
• 你已经通过map((state) => state.Admin2)把数组处理为纯郡县名的字符串数组，后续渲染<option>时不需要再取.Admin2属性

具体修改代码 #

1. 修正JSON导入 #

将导入语句改为：

import data from "./us_data/UScsvjson.json";

2. 修正CountyList组件逻辑 #

const CountyList = ({ selectedState, data }) => {
  // 直接过滤数据，无需JSON.parse
  const countyListForState = data
    .filter((item) => selectedState === item.Province_State)
    .map((item) => item.Admin2);

  return (
    <div>
      <label>county: </label>
      <select>
        {/* 直接使用字符串类型的county，无需取.Admin2，新增key避免React警告 */}
        {countyListForState.map((county) => (
          <option key={county} value={county}>{county}</option>
        ))}
      </select>
    </div>
  );
};

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