React中如何更新数组指定索引JSON对象并累加已有数值

需要实现为指定索引对应用户的saving字段累加指定金额的功能，示例场景：

• 第一次操作：给用户Cosmo Kramer的saving字段累加500，其原有saving值为100，累加后期望为600（100+500）
• 第二次操作：给用户George Costanza的saving字段累加1000，其原有saving值为3000，累加后期望为4000（3000+1000）

初始用户JSON数组结构如下：

[
  {
    "userID": "abc",
    "displayName": "Gerry Seinfeld",
    "saving": 10000000000
  },
  {
    "userID": "cde",
    "displayName": "George Costanza",
    "saving": 3000
  },
  {
    "userID": "efg",
    "displayName": "Elaine Benes",
    "saving": 20000000
  },
  {
    "userID": "hij",
    "displayName": "Cosmo Kramer",
    "saving": 100
  }
]

第一次更新Kramer数据后的期望结果：

[
  {
    "userID": "abc",
    "displayName": "Gerry Seinfeld",
    "saving": 10000000000
  },
  {
    "userID": "cde",
    "displayName": "George Costanza",
    "saving": 3000
  },
  {
    "userID": "efg",
    "displayName": "Elaine Benes",
    "saving": 20000000
  },
  {
    "userID": "hij",
    "displayName": "Cosmo Kramer",
    "saving": 600
  }
]

第二次更新George数据后的期望结果：

[
  {
    "userID": "abc",
    "displayName": "Gerry Seinfeld",
    "saving": 10000000000
  },
  {
    "userID": "cde",
    "displayName": "George Costanza",
    "saving": 4000
  },
  {
    "userID": "efg",
    "displayName": "Elaine Benes",
    "saving": 20000000
  },
  {
    "userID": "hij",
    "displayName": "Cosmo Kramer",
    "saving": 600
  }
]

原有代码存在4个核心错误，导致运行结果不符合预期：

1. 遍历更新时无差别给所有用户设置了score字段为固定随机金额，既没有判断当前遍历项是否是选中的目标用户，也没有在原有saving值基础上做累加，还错误操作了不存在的score字段
2. 随机索引生成逻辑硬编码最大值为4，后续用户数组长度变化时会出现索引越界、无法覆盖所有用户的问题
3. 排序逻辑基于错误的score字段，和需求中需要统计的saving字段不匹配
4. 状态解构命名错误，useState返回的第一个值写为use，和更新方法setUser无法对应，属于语法笔误

const [users, setUsers] = useState([]);

const chipMoney = async () => {
  const response = await fetch('https://brabrabra.io');
  const data = await response.json();
  const addMoney = getRandomMoney();
  // 基于接口返回的数组长度生成合法随机索引，避免硬编码问题
  const targetIndex = getRandomIndex(data.length);

  const updateData = data.map((obj, index) => {
    // 仅当索引匹配目标用户时，在原有saving基础上累加金额，其余用户原样返回
    if (index === targetIndex) {
      return {...obj, saving: obj.saving + addMoney}
    }
    return obj
  })
  // 基于saving字段做降序排序
  const sortedData = updateData.sort((a,b) => b.saving - a.saving);
  setUsers(sortedData);
}

const getRandomMoney = () => {
  const MIN = 50;
  const MAX = 10000;
  return Math.floor(Math.random() * (MAX - MIN)) + MIN;
}

// 传入数组长度动态生成索引范围，避免硬编码
const getRandomIndex = (arrayLength) => {
  const MIN = 0;
  return Math.floor(Math.random() * (arrayLength - MIN)) + MIN;
}

线上使用建议给fetch逻辑加try/catch异常捕获，避免接口请求失败时页面报错。

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