React JS：Form Group处理二维数组及修复下拉框不显示选项问题

问题背景 #

在React开发中，我尝试用Form Group标签遍历二维数组对象来动态填充下拉框。目前代码在<Form.Control as="select">内部嵌套了<div>标签，导致下拉框视觉上是空的，但浏览器元素检查面板里能看到<option>标签存在。数据通过API从GitHub分支获取正常，需求是先选择gadgets类型（比如phone），再在phoneName下拉框中展示对应品牌（比如nokia、samsung），但当前选项无法正常显示在表单控件内。

当前代码 #

<Form.Group controlId="phoneName">
  <Form.Label>Phone Names</Form.Label>
  <Form.Control
    as="select"
    name="phoneName"
    value={values.phoneName}
    onChange={handleChange}
    isInvalid={!!errors.phoneName && !!touched.phoneName}
  >
    {phones.map((item, index) => {
      return (
        <div key={index}>
          {item.phoneName.map((phone, index) => {
            return <option key={index}>{phone.name}</option>;
          })}{" "}
        </div>
      );
    })}
  </Form.Control>
  <Form.Control.Feedback type="invalid">
    {" "}
    {errors.phoneName}{" "}
  </Form.Control.Feedback>
</Form.Group>;

数据结构 #

[
  {
    "gadgets": "phone",
    "phoneName": [
      { "name": "nokia", "phoneColor": "blue", "memory": "enough" },
      { "name": "samsung", "phoneColor": "black", "memory": "little" }
    ]
  },
  {
    "gadgets": "ipad",
    "phoneName": [
      { "name": "apple", "phoneColor": "white", "memory": "high" },
      { "name": "samsung-g", "phoneColor": "black", "memory": "low" }
    ]
  }
]

解决方案 #

核心问题是**<select>标签的直接子元素只能是<option>或<optgroup>，嵌套<div>会被浏览器视为非法内容忽略**，导致选项无法正常渲染到下拉框中。结合你的需求（根据选中的gadgets类型筛选品牌），修改如下：

1. 确保有状态存储选中的gadgets类型（比如const [selectedGadget, setSelectedGadget] = useState('')）
2. 根据选中的gadgets过滤数据，生成对应的品牌选项
3. 直接在<Form.Control as="select">下渲染<option>，不要嵌套其他标签

修改后的代码：

<Form.Group controlId="phoneName">
  <Form.Label>Phone Names</Form.Label>
  <Form.Control
    as="select"
    name="phoneName"
    value={values.phoneName}
    onChange={handleChange}
    isInvalid={!!errors.phoneName && !!touched.phoneName}
  >
    {/* 添加默认提示选项 */}
    <option value="">请选择品牌</option>
    {/* 过滤并展开对应品牌列表 */}
    {phones
      .filter(item => item.gadgets === selectedGadget)
      .flatMap(item => item.phoneName)
      .map((phone) => (
        <option key={phone.name} value={phone.name}>
          {phone.name}
        </option>
      ))}
  </Form.Control>
  <Form.Control.Feedback type="invalid">
    {errors.phoneName}
  </Form.Control.Feedback>
</Form.Group>

额外优化点 #

• 用phone.name作为key（而非数组索引），避免因数组顺序变化导致的组件重渲染问题
• 在gadgets选择框的onChange事件中更新selectedGadget状态，确保联动逻辑生效
• 移除原代码中多余的空格拼接{" "}，避免不必要的空白内容

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