javascript - 如何使用ES6修改嵌套对象的特定元素？

Question

我有这个初始商店:

const initialState =
{
  0:{
    screen_name: '1',
    props: null,
  },
  1:{
    screen_name: '2',
    props: null,
  },
  2:{
    screen_name: '3',
    props: null,
  },
  3:{
    screen_name: '4',
    props: null,
  },
  4:{
    screen_name: '5',
    props: null,
  },
}

我想知道如何修改值 state.0.screen_name: 1，同时使用 ES6 保留其余原始状态？

这是我到目前为止所采取的方法:

export const navigationReducer = createReducer(initialState, {
  [types.CHANGE_SCREEN_EXPERIMENTAL](state,action){
    return{...state[action.id], screen_name:action.screen_name, ...state
  };
}

},)；

但是，这会返回:

action.id是0，它应该修改state[0]元素，但是，它复制了它的元素，修改了它们并将它们放置在状态对象本身而不是 state[0] 对象上。

期望的结果:

navigationReducer:{
  0: {
     props: null,
     screen_name: "ad"
  }
  1:Object
  2:Object
  3:Object
  4:Object
}

我不希望screen_name和props位于这些对象(0,1,2,3,4)之外。

任何想法都会受到欢迎。

Answer 1

我找到了使用 ES6 的方法

方法如下:

export const navigationReducer = createReducer(initialState, {
    [types.CHANGE_SCREEN_EXPERIMENTAL](state,action){
      return{
        ...state,[action.id]:{
          ...state[action.id],
          screen_name:action.screen_name,
          props:action.props,
        }
      };
    }
  },
);

这会导致:

非常感谢您的帮助和时间@ibrahimmahrir。