如何不使用if/else重构这段表单字段重置的条件逻辑？

原始代码 #

const handleChange = ({ selectedItem }) => {
    if (selectedItem?.value) {
      if (name === FieldNames.SecurityQuestion1) {
        resetField(FieldNames.FirstAnswer, '');
        resetField(FieldNames.ConfirmFirstAnswer, '');
      } else if (name === FieldNames.SecurityQuestion2) {
        resetField(FieldNames.SecondAnswer, '');
        resetField(FieldNames.ConfirmSecondAnswer, '');
      }
    }
};

尝试的错误代码（三元运算符） #

selectedItem?.value ? (name === FieldNames.SecurityQuestion1) &&  resetField(FieldNames.FirstAnswer, '');

可行重构方案 #

1. 配置对象映射法（推荐） #

通过对象建立问题字段与重置字段的映射关系，完全规避条件判断，代码简洁且易扩展：

const handleChange = ({ selectedItem }) => {
  if (!selectedItem?.value) return;

  const fieldResetMap = {
    [FieldNames.SecurityQuestion1]: [FieldNames.FirstAnswer, FieldNames.ConfirmFirstAnswer],
    [FieldNames.SecurityQuestion2]: [FieldNames.SecondAnswer, FieldNames.ConfirmSecondAnswer]
  };

  fieldResetMap[name]?.forEach(field => resetField(field, ''));
};

后续新增安全问题时，只需在fieldResetMap中添加对应键值对即可，无需修改逻辑代码。

2. 修正三元运算符写法 #

你之前的三元写法缺少假值分支，补全后可正常运行，但嵌套三元可读性较差，仅适合简单场景：

const handleChange = ({ selectedItem }) => {
  selectedItem?.value 
    ? name === FieldNames.SecurityQuestion1 
      ? (resetField(FieldNames.FirstAnswer, ''), resetField(FieldNames.ConfirmFirstAnswer, ''))
      : name === FieldNames.SecurityQuestion2 
        ? (resetField(FieldNames.SecondAnswer, ''), resetField(FieldNames.ConfirmSecondAnswer, ''))
        : void 0
    : void 0;
};

3. 逻辑与运算符组合 #

利用&&短路特性拆分分支，无嵌套但分支过多时代码会冗余：

const handleChange = ({ selectedItem }) => {
  selectedItem?.value && name === FieldNames.SecurityQuestion1 && (
    resetField(FieldNames.FirstAnswer, ''),
    resetField(FieldNames.ConfirmFirstAnswer, '')
  );

  selectedItem?.value && name === FieldNames.SecurityQuestion2 && (
    resetField(FieldNames.SecondAnswer, ''),
    resetField(FieldNames.ConfirmSecondAnswer, '')
  );
};

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