React中如何将数组元素插入对象生成id不变、type更新的对象列表

原有代码问题点 #

• 函数内部重复声明value变量，覆盖了多选组件传入的选中值参数
• 直接把选中值数组整体赋值给type字段，没有逐个遍历生成对应对象
• rowIndex没有按数组下标动态更新
• 变量作用域错误，newObj定义在函数内部，外部无法访问，push操作位置错误，还重复推入了原有对象
• 原有基础对象中type: En未加引号，会被识别为未定义变量抛出语法错误

调整后可运行代码 #

handleOnRowChange = (selectedValues) => {
  // 基础对象可根据你的实际业务场景调整来源
  const baseObj = {rowIndex: 0, id: '8538', type: 'En'};
  // 遍历选中值数组，批量生成符合要求的对象
  const newList = selectedValues.map((type, index) => {
    return {
      ...baseObj,
      id: baseObj.id,
      type: type,
      // 按遍历顺序动态更新行下标
      rowIndex: index
    }
  });
  // 此处可对newList做后续业务处理，比如赋值给组件state
  console.log(newList);
}

// 组件onChange绑定逻辑无需调整，正常传入选中值即可
onChange={(e) =>
  this.handleOnRowChange(
    e.target.value
  )
}

输出验证 #

当传入选中值selectedValues = ['En', 'Ta', 'Fr']时，生成的newList完全匹配你需要的结构：

[
  {rowIndex: 0, id: '8538', type: 'En'},
  {rowIndex: 1, id: '8538', type: 'Ta'},
  {rowIndex: 2, id: '8538', type: 'Fr'}
]

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