Question

我有一个道具是一个对象列表。我的reducer用于更新对象的某个字段并将其附加到列表中，要更新的值是通过action.payload（这是商店的另一个支柱）提供的。

我知道只需在列表中添加对象，我就可以像这样使用扩展运算符

function myReducer(state=[],action){
    case something:
        return [...state,action.payload];
    case default:
        return state;
}

但是说我有一个更改action.payload.aCertainField，然后将其附加到对象列表中。当我做这样的事情时：

action.payload.aCertainField = aCertainValue;
return [...state,action.payload];

但它实际上也改变了其他道具aCertainField。我不要那个。有解决方案吗？

Answer 1

您可以使用ES6执行以下操作：

let { aCertainField, id } = action.payload.obj;

//find the index of object in that array hoping the id is unique for the object
let indexOfObject = state.findIndex( (item) => item.id === id );

let actualObject = Object.assign({}, state[indexOfObject], { aCertainField });

return [
  ...state.slice(0, indexOfObject),
  actualObject,
  ...state.slice(indexOfObject+1)
]

注意：认为id是对象结构的唯一键，aCertainField是要更新的值

更新列表中对象的字段

1 个答案: