javascript - React redux - 更新状态中的嵌套数组

Question

我正在 React redux 中尝试一些应用程序，但我在更新(推送、删除、更新)状态中的嵌套数组时遇到问题。

我有一些这样的服务对象:

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'xxx'},
       { id: 2, sName: 'zzz'}, 
    ]
}

无论我在带有属性集合的 reducer 中做了什么(在将属性添加到集合的情况下)都会产生问题，即所有属性的值都与我最近添加的最后一个值相同 -> 添加的属性对象在服务属性集合中，但操作替换此集合中所有属性中的所有值。我的 reducer :

export function service(state = {}, action) {
        switch (action.type) {
            case 'ADD_NEW_PROPERTY':
                console.log(action.property) // correct new property
                const service = {
                    ...state, properties: [
                        ...state.properties, action.property
                    ]
                }
                console.log(service); // new property is pushed in collection but all properties get same values
                return service

            default:
                return state;
        }
    }

我尝试了一些使用 immutability-helper 库的解决方案，但它产生了同样的问题:

export function service(state = {}, action) {
    case 'ADD_NEW_PROPERTY':

                return update(state, {properties: {$push: [action.property]}})

            default:
                return state;
        }

例如，当我向上面的示例添加新属性 { id: 1, sName: 'NEW'} 时，我将获得此状态:

{
    name: 'xzy',
    properties: [
       { id: 1, sName: 'NEW'},
       { id: 1, sName: 'NEW'}, 
       { id: 1, sName: 'NEW'}
    ]
}

有人可以帮忙吗？ :)

Answer 1

同时复制一份 action.property。无论调度此操作的是什么，它都可以重用同一对象。

export function service(state = {}, action) {
  switch (action.type) {
    case 'ADD_NEW_PROPERTY':
      console.log(action.property) // correct new property
      const service = {
        ...state,
        properties: [
          ...state.properties, 
          { ...action.property }
        ]
      }
      console.log(service); // new property is pushed in collection but all properties get same values
      return service

    default:
      return state;
  }
}