Stage枚举列表翻译显示及前后端类型不匹配问题求助

问题分析 #

• 初始显示问题：TypeScript数字枚举会自动生成反向映射（比如Stage[0] = 'UnAssigned'、Stage['UnAssigned'] = 0），如果过滤逻辑疏漏，Object.values(Stage)会同时返回数字值和字符串键，导致下拉列表混显数字与字符串。
• 传参类型问题：调整方案时若把value设为枚举的字符串键，表单提交时会传递字符串类型值，与后端期望的数字类型不匹配，引发转换错误。

修正方案 #

核心要保证两点：下拉选项的value是数字类型（匹配后端要求），label是正确的翻译文本。修正后的代码如下：

enum Stage {
  UnAssigned = 0,
  PreAcceptance = 1,
  Accepted = 2,
  BeforeTransplantation = 3,
  DayOfTransplantation = 4,
  AfterTransplantation = 5,
  EndOfTransplantationProcess = 6,
  PeriodicFollowUp = 7,
  TransplantationFailure = 8,
  RecoveryAfterTransplantation = 9,
  Waiting = 10,
  Dead = 11,
}

export default Stage;

// 修正后的下拉选项生成逻辑
const stageOptions = Object.entries(Stage)
  // 过滤掉反向映射的字符串键，只保留正向枚举的数字值条目
  .filter(([key]) => !isNaN(Number(key)))
  .map(([key, value]) => ({
    // value保持数字类型，确保传给后端的格式正确
    value: value as number,
    // 用枚举的字符串键作为翻译ID，获取对应翻译文本
    label: intl.formatMessage({ id: key }),
  }));

<Col sm="6">
  <FormComp
    label={<FormattedMessage id="stage" />}
    controlHook={controlHook}
    name="stage"
    type="select"
    options={stageOptions}
    errors={errors}
    disabled={disabled}
    required
  />
</Col>

关键说明 #

• 用Object.entries()遍历枚举，能同时拿到键（字符串）和值（数字），比Object.values()更易区分正向/反向映射。
• 过滤条件!isNaN(Number(key))精准筛选出正向枚举的数字值条目（反向映射的key是字符串，转数字会得到NaN）。
• value直接使用枚举的数字值，彻底避免后端类型不匹配的问题。
• label用枚举的字符串键作为翻译ID，确保能获取到正确的翻译文本。

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