代码之家  ›  专栏  ›  技术社区  ›  mobiman

React-Native:指定要在reducer中修改的数组项(使用React不变性帮助程序)

  •  0
  • mobiman  · 技术社区  · 6 年前

    我当前正在导入此库:

    import update from 'react-addons-update';
    

    以下是我的列表:

    [{id:1,标题:“一些标题”},{id:2,标题:“一些其他标题”}]

    我的行动:

    行动类型:“change\u title”
    行动有效载荷:[2,“一些新标题”]

    作用中的第一个参数。有效载荷是指 身份证件 我要更改的阵列的

    这是我的减速机代码:

    export default (state = [], action) => {
      switch (action.type) {
        case 'change_title':
          return update(state, {
            0: {
              title: { $set: action.payload[1] }
            }
          });
        default:
          return state;
      }
    };
    

    如您所见,在当前状态下,我的reducer函数 总是 更改中的“标题”值 第一个阵列 ,但我想知道:如何根据“id”值指定要修改的数组?

    1 回复  |  直到 6 年前
        1
  •  1
  •   Anthony    6 年前

    我认为,你至少可以用两种方式做到这一点。首先,使用 update() ,您需要使用查找要更新的项的索引 Array.prototype.findIndex() :

    const index = state.findIndex(x => x.id === action.payload[0]);
    
    case 'change_title':
      return update(state, {
        [index]: {
          title: { $set: action.payload[1] }
        }
      });
    

    或仅使用地图:

    case 'change_title':
        return state.map(item ==> {
            if(item.id !== action.payload[0]) {
                return item;
            }
    
            return {
                ...item,
                title: action.payload[1]
            };
        });