如何更新对象数组中所有同名key，Redux修改volume值异常如何解决

错误原因 #

• 核心逻辑错误：reducer中遍历的是初始固定值arr，而非当前最新的state。每次触发action都是在初始值100的基础上扣减随机数，而非在上一次修改后的volume值基础上扣减，就会出现上一次扣减后值为85、下一次用初始100扣减10得到90的情况，看起来就是volume增加，不符合只递减的要求。
• 变量名拼写错误：生成的新数组变量名为newArr，赋值给state时误写为不存在的newArray，会触发引用错误，导致状态更新完全不符合预期。
• Redux规范错误：reducer处理完对应action后必须返回新状态，且必须添加default分支返回原有state，你的代码既无返回值也无默认分支，状态更新逻辑不生效。
• 随机数范围注意：Math.floor(Math.random() * 20)生成的随机数范围是0-19，要包含20需要修改为Math.floor(Math.random() * 21)。

修正后代码 #

const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      // 遍历当前最新state，随机数生成放到map回调内保证每个对象的随机数不同
      return state.map(item => {
        const randomNumber = Math.floor(Math.random() * 21);
        // 可选：添加Math.max边界判断避免volume减为负数，不需要可以去掉
        return {
          ...item,
          volume: Math.max(0, item.volume - randomNumber)
        }
      })
    default:
      return state
  }
};

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