在 React 中基于 2 个 JSON 文件动态填充下拉列表答案

【问题标题】：Dynamically populating dropdown based on 2 JSON files in React在 React 中基于 2 个 JSON 文件动态填充下拉列表
【发布时间】：2021-12-24 16:17:57
【问题描述】：

我有 2 个 JSON 文件，分别包含地区和省份的数据。

这是我的regions.json的示例数据

[
  {
    "id": 1,
    "long_name": "First region in the country",
    "name": "firstRegion",
    "key": "FR"
  },
  {
    "id": 2,
    "long_name": "Second region in the country",
    "name": "secondRegion",
    "key": "SR"
  }
]

这是我的provinces.json

[
  { "id": 1, "name": "province One", "region_key": "FR", "key": "p1" },
  { "id": 2, "name": "province Two", "region_key": "SR", "key": "p2" },
  { "id": 3, "name": "province Three", "region_key": "FR", "key": "p3" },
  { "id": 4, "name": "province Four", "region_key": "SR", "key": "p4" }
]

我想要发生的是当用户从第一个下拉列表中选择一个地区时，例如First region in the country，第二个下拉列表，即省份下拉列表，必须动态填充属于First region in the country的省份或 region_key FR 的省份。根据这个逻辑，我假设一定有一些可能发生的映射。我提到了here 的答案之一，但不幸的是，当我尝试从各省的选择组件中编辑options 值时，我收到错误props.options.map is not a function。另外，我认为我的 JSON 文件需要不同的映射样式吗？因为我需要将regions.json 中的key 与provinces.json 中的region.key 匹配，但我对使用React 将数据库中的数据渲染到前端还很陌生。

这是我的下拉菜单的代码 sn-p：

/* Dropdown for Regions */
<h4 className="mb-3 text-sm">Regions</h4>
   <Select
     className="basic-multi-select text-sm"
     classNamePrefix="select"
     defaultValue={selectedRegions}
     getOptionLabel={(region) => region.long_name}
     getOptionValue={(region) => region.id}
     isMulti
     name="regions"
     options={regions}
     onChange={handleChangeRegion}
     placeholder="Region select"
     />
/* Dropdown for Provinces */
 <h4 className="mb-3 text-sm">Provinces</h4>
   <Select
     className="basic-multi-select text-sm"
     classNamePrefix="select"
     defaultValue={selectedProvinces}
     getOptionLabel={(province) => province.name}
     getOptionValue={(province) => province.id}
     isMulti
     name="provinces"
     options={provinces}
     onChange={handleChangeProvince}
     placeholder="Province Select"
     />

这是我的handleChangeRegion，用于上下文。

const handleChangeRegion = (selectedRegions) => {
    setSelectedRegions([...selectedRegions])
    regionID = []
    for (var i = 0; i < Object.keys(selectedRegions).length; i++) {
      regionID[i] = selectedRegions[i].id
    }
}

【问题讨论】：

您能否告诉我们您为“选择”组件使用的框架或实现（如果您自己编写的话）？另外能否提供handleChangeRegion函数的代码？
@Lavariet 我正在使用 headlessui 的 Popovers。另外，我编辑了我的代码并添加了handleChangeRegion 的函数。对于上下文，选择区域的 id 放置在全局变量中的数组中（同时）；这解释了每次执行时清空 regionID 数组。

标签： reactjs drop-down-menu

【解决方案1】：

我会这样处理：

对每个选择使用useState 挂钩来存储所选值（例如active_region 和active_province）
使用region.key 作为第一个下拉菜单的值
根据选定的region_key 过滤provinces 列表并将其用于第二个下拉列表：

provinces.filter(o => o.region_key === active_region)

当然，这是假设您使用的是功能组件（因此我提到了钩子）

【讨论】：