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

Stack Overflow用户

提问于 2017-11-23 15:20:29

回答 4查看 2.4K关注 0票数 1

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

我有一个名为service的对象，如下所示：

{
    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;
        }
    }

我尝试了一些使用不变性帮助器库的解决方案，它产生了同样的问题：

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'}
    ]
}

有人能帮忙吗？:)

javascript

reactjs

react-redux

immutability

电商安全场景方案

帮助电商行业客户一站式解决Web安全、黑产羊毛党对抗、高危漏洞、BOT工具、恶意入侵门户服务器等安全问题

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-11-23 15:54:08

也要复制一份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;
  }
}

票数 2

Stack Overflow用户

发布于 2017-11-23 17:15:08

我建议您使用不可变的数据https://facebook.github.io/immutable-js/docs/#/List

import { fromJS, List } from 'immutable';

const initialState = fromJS({
  propeties: List([{ id: 1, sName: 'xyz' }]
}

function reducer(state = initialState, action) {
  case ADD_NEW_PROPERTY:
    return state
      .update('properties', list => list.push(action.property));
 // ...
}

票数 1

Stack Overflow用户

发布于 2017-11-23 15:38:41

您的服务缩减程序可能看起来有点像这样：

// Copy the state, because we're not allowed to overwrite the original argument
const service = { ...state }; 
service.properties.append(action.property)
return service