React中基于两个JSON文件动态填充联动下拉选框问题咨询

报错原因 #

props.options.map is not a function报错的核心原因是你传给Select组件的options属性不是数组类型，react-select要求options必须为数组才能遍历渲染选项，排查两个常见场景：

• 省份options的初始值设置为了null/undefined等非数组类型
• 后续修改省份options时赋值了非数组格式的数据

联动实现步骤 #

1. 调整State定义 #

你需要拆分省份数据为「全量原始数据」和「筛选后可选数据」两个维度，避免污染原始数据：

import regionsData from './regions.json'
import provincesData from './provinces.json'
import { useState } from 'react'

// 声明所需state
const [regions, setRegions] = useState(regionsData) // 全量地区数据
const [selectedRegions, setSelectedRegions] = useState([]) // 用户选中的地区
const [allProvinces, setAllProvinces] = useState(provincesData) // 全量省份原始数据
const [filteredProvinces, setFilteredProvinces] = useState([]) // 筛选后省份可选数据
const [selectedProvinces, setSelectedProvinces] = useState([]) // 用户选中的省份

如果数据是从后端接口获取，把初始赋值逻辑放到useEffect的接口请求回调里即可。

2. 重写地区选择回调逻辑 #

每次地区选中状态变化时，根据选中地区的key字段筛选对应省份：

const handleChangeRegion = (selectedRegions) => {
  setSelectedRegions(selectedRegions || [])
  // 拿到所有选中地区的key集合
  const selectedRegionKeys = (selectedRegions || []).map(region => region.key)
  // 从全量省份数据中筛选出匹配的省份
  const matchedProvinces = allProvinces.filter(province => 
    selectedRegionKeys.includes(province.region_key)
  )
  // 更新省份可选列表
  setFilteredProvinces(matchedProvinces)
  // 可选：清空之前选中的省份，避免提交无效数据
  setSelectedProvinces([])
}

const handleChangeProvince = (selectedProvinces) => {
  setSelectedProvinces(selectedProvinces || [])
}

3. 修改省份下拉组件配置 #

把省份下拉的options属性替换为筛选后的filteredProvinces：

{/* 地区下拉选框 保持原有配置即可 */}
<h4 className="mb-3 text-sm">Regions</h4>
<Select
  className="basic-multi-select text-sm"
  classNamePrefix="select"
  value={selectedRegions}
  getOptionLabel={(region) => region.long_name}
  getOptionValue={(region) => region.id}
  isMulti
  name="regions"
  options={regions}
  onChange={handleChangeRegion}
  placeholder="Region select"
/>
{/* 省份下拉选框 替换options属性 */}
<h4 className="mb-3 text-sm">Provinces</h4>
<Select
  className="basic-multi-select text-sm"
  classNamePrefix="select"
  value={selectedProvinces}
  getOptionLabel={(province) => province.name}
  getOptionValue={(province) => province.id}
  isMulti
  name="provinces"
  options={filteredProvinces}
  onChange={handleChangeProvince}
  placeholder="Province Select"
/>

注意：把原来的defaultValue改为value可以保证选中值和state强绑定，避免状态不同步的问题

额外注意事项 #

• 所有列表类型的state初始值必须设置为[]，避免初始渲染时就触发map报错
• 不要直接修改全量省份数据allProvinces，每次筛选都基于原始全量数据生成新的筛选列表，避免数据污染
• 如果支持地区多选，筛选逻辑会自动匹配所有选中地区对应的省份，符合你当前isMulti开启的配置

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