如何在React中只求和对象的指定动态属性值以更新score字段

该方案同时满足动态属性匹配、React 不可变更新规范、手动编辑分数兼容三个核心需求： #

1. 封装通用分数计算工具函数 #

不需要硬编码game属性名，通过正则匹配所有带game标识的键名自动累加，自动过滤非数字值避免NaN问题：

/**
 * 计算玩家单场游戏总和
 * @param {object} player 玩家对象
 * @param {boolean} ignoreManual 是否忽略手动设置的分数标识
 * @returns {number} 计算后的总分
 */
const calcPlayerTotalScore = (player, ignoreManual = false) => {
  // 支持手动编辑分数不被自动计算覆盖，不需要该功能可删除该判断
  if (!ignoreManual && player.isManualScore) return player.score
  return Object.keys(player).reduce((sum, key) => {
    // 匹配所有包含game的属性，可根据业务需求调整正则规则
    if (/game/.test(key) && typeof player[key] === 'number') {
      sum += player[key]
    }
    return sum
  }, 0)
}

2. React State 中使用示例 #

初始化/批量更新玩家分数 #

// 假设初始拉取到的玩家列表为rawPlayerList
const [players, setPlayers] = useState([])

// 初始化时自动计算所有玩家的总分
useEffect(() => {
  const processedPlayers = rawPlayerList.map(player => ({
    ...player,
    score: calcPlayerTotalScore(player)
  }))
  setPlayers(processedPlayers)
}, [rawPlayerList])

单条game属性更新时自动同步总分 #

/**
 * 更新玩家单个游戏的分数
 * @param {number} playerId 玩家ID
 * @param {string} gameKey 游戏属性名
 * @param {number} value 新的分数值
 */
const updateGameScore = (playerId, gameKey, value) => {
  setPlayers(prev => prev.map(item => {
    if (item.id !== playerId) return item
    const updatedItem = { ...item, [gameKey]: value }
    // 重新计算总分
    return {
      ...updatedItem,
      score: calcPlayerTotalScore(updatedItem)
    }
  }))
}

手动修改总分适配 #

如果需要支持用户手动修改score不被自动计算覆盖，只需要在用户手动编辑时给玩家对象加上isManualScore: true标识即可：

/**
 * 手动更新玩家总分
 * @param {number} playerId 玩家ID
 * @param {number} newScore 手动输入的总分
 */
const updateManualScore = (playerId, newScore) => {
  setPlayers(prev => prev.map(item => {
    if (item.id !== playerId) return item
    return {
      ...item,
      score: newScore,
      isManualScore: true
    }
  }))
}

方案优势 #

• 完全适配动态增删game属性的场景，新增任何带game标识的属性都会自动纳入总分计算，不需要修改逻辑代码
• 遵循React不可变更新规范，不会触发意外重渲染，也不会污染原始数据
• 内置类型校验，避免非数字值导致的总分异常
• 仅需10行左右的工具函数即可覆盖所有需求，性能开销极低，无额外依赖

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