Javascript如何更新对象内的数组？React reducer添加消费记录无更新问题

问题原因 #

• concat方法不会修改原数组，你调用后没有接收返回值，添加操作实际未生效
• 直接修改原state中的wallets对象，违反了React reducer的不可变更新原则，React无法检测到状态变更，不会触发组件重渲染
• 原有逻辑未更新全局expenses数组，hasExpenses的判断用的是更新前的数组长度，计算结果错误

修正后代码 #

if (action.type === 'ADD') {
  const { walletId } = action.payload;
  // 兼容目标钱包不存在的边界情况
  if (!state.wallets[walletId]) return state;

  // 不可变更新对应钱包的消费记录
  const targetWalletExpenses = state.wallets[walletId];
  const updatedTargetWallet = targetWalletExpenses.concat(action.payload);
  // 生成新的wallets对象
  const updatedWallets = {
    ...state.wallets,
    [walletId]: updatedTargetWallet
  };
  // 更新全局消费记录数组
  const updatedExpenses = state.expenses.concat(action.payload);
  const updatedHasExpenses = updatedExpenses.length > 0;

  return {
    ...state,
    wallets: updatedWallets,
    expenses: updatedExpenses,
    hasExpenses: updatedHasExpenses
  };
}

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