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

IT技术 javascript reactjs react-redux immutability
2021-05-24 07:59:07

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

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

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

无论我在带有属性集合的 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'}
    ]
}

有人可以帮忙吗？:)

4个回答

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

我建议您使用不可变数据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));
 // ...
}

您的服务减速器应该看起来像这样：

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

在返回状态之前，您应该始终复制状态。

  export default function(state = {}, action) {
  switch(action.type) {
    case 'GET_DATA_RECEIVE_COMPLETE': {
      const data  = action.firebaseData;
      const newState = Object.assign({}, state, {
        data
      });

      return newState
    }
    default:
      return state;

  }
}
其它你可能感兴趣的问题
上一篇react-router-dom <Link> 未更新页面 下一篇React webapp 中的字符串本地化