ReactJS如何向已有Object追加同键新对象而不覆盖原有值

核心问题说明 #

JavaScript 中普通对象的键具有全局唯一性，对同一个键重复赋值会直接覆盖原有值，你期望的同一个键对应多个独立对象的格式不符合原生JS语法规范，无法直接实现，需要对现有结构做最小兼容调整，满足你沿用现有业务流的要求。

方案1：单键对应数组存储（推荐，改动量最小） #

将每个键对应的取值改为数组，同一个用户标识下的多个对象都存在该数组中，既保留了原有键的索引能力，又能存储多组数据：

赋值代码示例 #

// 新增/追加数据通用逻辑
function addUserValue(baseKey, userInfo) {
  // 键不存在时先初始化为空数组
  if (!value[baseKey]) {
    value[baseKey] = []
  }
  // 追加新的用户数据，不会覆盖原有值
  value[baseKey].push(userInfo)
}

// 首次添加tom.russel
addUserValue('tom.russel', {
  userType: "responser",
  data: [ [Object] ] ,
  time: 1631610484971
})

// 追加同键的新数据
addUserValue('tom.russel', {
  userType: "user",
  data: [ [Object] ] ,
  time: 163161048907
})

遍历渲染适配 #

原有遍历逻辑几乎不用修改，只需要加一层数组遍历即可：

Object.entries(value).forEach(([userKey, userInfoList]) => {
  // userKey 为原有的邮箱/用户标识
  userInfoList.forEach(userInfo => {
    // 原有渲染逻辑直接复用，读取userInfo的userType、time等属性即可
    console.log(userKey, userInfo.userType, userInfo.time)
  })
})

方案2：键加唯一后缀（完全兼容原有遍历逻辑） #

如果必须严格保留原结构中「单键对应单对象」的格式，可以给重复的用户标识加唯一后缀避免键冲突，展示时再去掉后缀即可：

赋值代码示例 #

const baseKey = 'tom.russel'
// 生成唯一键，这里用时间戳，也可以用自增序号等其他唯一标识
const uniqueKey = `${baseKey}_${Date.now()}`
value[uniqueKey] = {
  userType: "user",
  data: [ [Object] ] ,
  time: 163161048907
}

展示适配 #

前端渲染时提取原始用户标识即可：

Object.entries(value).forEach(([uniqueKey, userInfo]) => {
  // 去掉后缀拿到原始用户标识
  const baseKey = uniqueKey.split('_')[0]
  // 后续渲染逻辑和之前完全一致
  console.log(baseKey, userInfo.userType, userInfo.time)
})

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