React实现Excel数据三级联动选择的优化方案问询

完全可以用CSV文件优化你的联动逻辑，既避免硬编码的繁琐，也能轻松管理海量城市数据，下面是具体实现步骤：

1. 预处理Excel数据为CSV格式 #

把你的Excel文件另存为UTF-8编码的CSV文件，确保数据列包含Region、Country、City三级字段，示例格式如下：

Region,Country,City
亚洲,中国,北京
亚洲,中国,上海
亚洲,日本,东京
欧洲,法国,巴黎
欧洲,德国,柏林

将这个CSV文件放到React项目的public目录下，方便前端直接读取。

2. 安装CSV解析工具（可选但推荐） #

原生处理CSV字符串容易出错，推荐用papaparse库快速解析：

npm install papaparse

3. 构建联动数据结构并实现组件 #

在组件中读取CSV并将数据转换为嵌套映射结构，后续联动查询会非常高效：

import { useState, useEffect } from 'react';
import Papa from 'papaparse';

function RegionCitySelector() {
  const [selectedRegion, setSelectedRegion] = useState('');
  const [selectedCountry, setSelectedCountry] = useState('');
  const [selectedCity, setSelectedCity] = useState('');
  const [regionMap, setRegionMap] = useState({});

  // 仅在组件挂载时加载一次CSV数据
  useEffect(() => {
    fetch('/region-city-data.csv') // 路径对应public下的文件
      .then(res => res.text())
      .then(csvText => {
        const parsedData = Papa.parse(csvText, { header: true, skipEmptyLines: true }).data;
        
        // 构建嵌套映射：{ 地区: { 国家: [城市列表] } }
        const map = {};
        parsedData.forEach(item => {
          const { Region, Country, City } = item;
          if (!map[Region]) map[Region] = {};
          if (!map[Region][Country]) map[Region][Country] = [];
          map[Region][Country].push(City);
        });
        setRegionMap(map);
      });
  }, []);

  // 根据选中的地区过滤国家列表
  const availableCountries = selectedRegion ? Object.keys(regionMap[selectedRegion] || {}) : [];
  // 根据选中的国家过滤城市列表
  const availableCities = selectedCountry && selectedRegion ? regionMap[selectedRegion][selectedCountry] || [] : [];

  return (
    <div style={{ display: 'flex', gap: '1rem', padding: '1rem' }}>
      <select
        value={selectedRegion}
        onChange={e => {
          setSelectedRegion(e.target.value);
          setSelectedCountry(''); // 切换地区时重置国家和城市
          setSelectedCity('');
        }}
        style={{ padding: '0.5rem' }}
      >
        <option value="">请选择地区</option>
        {Object.keys(regionMap).map(region => (
          <option key={region} value={region}>{region}</option>
        ))}
      </select>

      <select
        value={selectedCountry}
        onChange={e => {
          setSelectedCountry(e.target.value);
          setSelectedCity(''); // 切换国家时重置城市
        }}
        disabled={!selectedRegion}
        style={{ padding: '0.5rem' }}
      >
        <option value="">请选择国家</option>
        {availableCountries.map(country => (
          <option key={country} value={country}>{country}</option>
        ))}
      </select>

      <select
        value={selectedCity}
        onChange={e => setSelectedCity(e.target.value)}
        disabled={!selectedCountry}
        style={{ padding: '0.5rem' }}
      >
        <option value="">请选择城市</option>
        {availableCities.map(city => (
          <option key={city} value={city}>{city}</option>
        ))}
      </select>
    </div>
  );
}

export default RegionCitySelector;

4. 额外优化建议 #

• 如果CSV文件体积特别大（十万条以上），可以考虑在后端做数据接口，前端按需请求对应地区/国家的城市数据，减少前端内存占用；
• 提前给CSV数据去重，避免同一个城市重复出现；
• 增加加载状态提示，比如在CSV加载完成前显示"加载中..."，提升用户体验。

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