ES6/React中如何根据条件修改对象键对应值的最佳实现方案

核心优化思路 #

• 用映射表替代冗长的switch分支，规则维护更简单，代码可读性更高
• 遵循React不可变数据原则，不直接修改原始对象，避免副作用
• 用Object.entries替代Object.keys简化数组转换逻辑

完整实现代码 #

首先提前定义状态到step的映射常量，可单独抽离到公共配置文件统一维护：

const STATUS_STEP_MAP = {
  'data_added': 1,
  'product_added': 2,
  'consumer_added': 3,
  'water_added': 4,
  'things_added': 5,
  'funky_added': 6
}

接口回调中的处理逻辑：

.then(res => {
  // 取对应step，匹配失败默认返回1
  const currentStep = STATUS_STEP_MAP[res.data.status] ?? 1
  // 生成新对象，不修改原newData
  const updatedData = {
    ...newData,
    step: currentStep
  }
  // 转换为期望的输出结构
  const result = Object.entries(updatedData).map(([key, value]) => ({
    key,
    value
  }))
  // result即为目标输出，可直接使用或更新React状态
})

方案优势 #

1. 可维护性强：后续新增/修改status和step的对应规则，仅需要修改映射表即可，无需调整逻辑代码，也不会出现switch漏写break的低级错误
2. 符合React开发规范：通过对象展开运算符生成新对象，不修改原始数据，避免副作用，适配React状态更新的不可变要求，不会引发异常渲染问题
3. 代码精简：相比switch写法减少了近70%的冗余逻辑，Object.entries直接获取键值对，不用单独取值，代码更易读

如果是在React组件内需要更新状态，直接将result传入setState方法即可：

const [stepList, setStepList] = useState([])

// 回调中直接更新状态
setStepList(result)

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