React Redux嵌套JSON更新求助：深度属性修改失败

我来帮你梳理下这个深度嵌套状态更新的问题，先分析下你遇到的两种情况，再给出可行的解决方案：

为什么方式1无法正常工作？ #

你的方式1代码里有个关键问题：生成新的rewards数组时，只保留了修改后的那一项，原数组里的其他奖励项都被丢弃了。看这段代码：

return { 
  ...state, 
  rewards: [ 
    { 
      ...state.rewards[action.index], 
      value: { 
        ...state.rewards[action.index].value[0], 
        target: [ 
          ...state.rewards[action.index].value[0].target, 
          initialState.value_key_pair 
        ] 
      } 
    } 
  ] 
};

这里直接把rewards赋值为一个只包含修改后项的新数组，原rewards里的其他元素都没被保留，这肯定会导致状态异常。

另外还有个小细节：你处理value的时候，只拷贝了value[0]，但如果value是一个包含多个元素的数组，后面的元素也会丢失，这点也要注意。

方式2的问题：为什么会添加索引？ #

你提到方式2能运行但会向对象添加索引，大概率是因为你用了可变的修改方式（比如直接state.rewards[action.index].value[0].target.push(...)），或者在拷贝数组时错误地保留了索引属性。这种方式虽然能修改数据，但不符合immutable状态更新的原则，还会引入意外的索引属性。

正确的immutable更新写法 #

要实现深度嵌套的状态更新，核心是逐层拷贝，只修改需要更新的部分，同时保留其他所有原有数据。这里给你写一个正确的版本：

case ADD_REWARD:
  console.log("state", state);
  console.log("reward index", action.index);
  
  // 1. 先获取要修改的目标reward项，深度拷贝需要更新的嵌套属性
  const targetReward = state.rewards[action.index];
  const updatedTargetReward = {
    ...targetReward,
    // 处理value数组：保留原数组除了第0项以外的所有元素，只更新第0项的target
    value: [
      {
        ...targetReward.value[0],
        target: [
          ...targetReward.value[0].target,
          initialState.value_key_pair
        ]
      },
      ...targetReward.value.slice(1) // 保留value数组中第0项之后的所有元素
    ]
  };
  
  // 2. 生成新的rewards数组：用map遍历，只替换指定索引的项，其他项保持不变
  const updatedRewards = state.rewards.map((reward, idx) => 
    idx === action.index ? updatedTargetReward : reward
  );
  
  // 3. 返回新的state对象
  return {
    ...state,
    rewards: updatedRewards
  };

关键要点： #

• 用map方法更新数组：遍历原rewards数组，只有索引匹配的项才替换为修改后的版本，其他项原样保留，这样就不会丢失原有数据。
• 逐层拷贝嵌套对象：从state到rewards项，再到value数组、target数组，每一层都用扩展运算符...做浅拷贝，确保只修改需要更新的部分，不影响原状态。
• 保留数组中未修改的元素：比如value数组如果有多个元素，一定要用slice(1)把后面的元素也保留下来。

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