时间戳

首页 > 解决方案 > 在 React 中基于 2 个 JSON 文件动态填充下拉列表

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

问题描述

我有 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。根据这个逻辑，我假设一定有一些可能发生的映射。我在这里提到了一个答案，但不幸的是，当我尝试options从各省的 selectcomponent 编辑值时，我得到一个错误props.options.map is not a function。另外，我认为我的 JSON 文件需要不同的映射样式吗？因为我需要匹配keyfromregions.json到region.keyinprovinces.json但我对使用 React 将数据从数据库渲染到前端还很陌生。

这是我的下拉列表的代码片段：

/* 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
    }
}

标签： reactjsdrop-down-menu

解决方案

以下是我将如何解决这个问题：

  1. 为每个选择使用一个useState钩子来存储选定的值（比如active_regionand active_province）
  2. 用作region.key第一个下拉列表的值
  3. provinces根据所选过滤列表region_key并将其用于第二个下拉列表：
provinces.filter(o => o.region_key === active_region)

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

推荐阅读