React中下拉菜单赋值异常：编辑时无法显示testType值

核心问题 #

你的下拉菜单未正确绑定对应的值，且未区分编辑/添加场景的填充逻辑。

具体修改点 #

1. 修正下拉菜单的value绑定
   当前<select>标签的value={field}是错误的，你传入了整个字段对象而非对应的值，应该调用getDropdownValue(field.name)来获取testType或capability的实际值。

2. 区分编辑/添加场景
   根据需求，仅在编辑状态（criteriaNum存在，即!!criteriaNum为true）时填充值，添加状态下保持默认空值。

修改后的代码片段 #

{/* 原下拉菜单部分替换为以下代码 */}
<select
  id={field.name.replaceAll(" ", "-")}
  aria-describedby={field.name.replaceAll(" ", "-") + "-desc"}
  // 编辑时填充对应值，添加时为空
  value={!!criteriaNum ? getDropdownValue(field.name) : ""}
  onChange={(event) =>
    onFieldChange(field.name, event.target.value)
  }
>
  <option disabled value="">
    Select a {field.name}
  </option>
  {field.fields.map((option) => (
    <option key={option} value={option}>
      {option}
    </option>
  ))}
</select>

补充说明 #

• 把循环变量名从field改成option，避免和外层的field变量重名，提升代码可读性
• 给默认禁用的option加上空值value=""，确保和添加状态下的空值匹配，避免出现选中异常

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