更新列表中对象的字段

Question

我有一个道具，它是一个对象列表。我的减速器旨在更新对象的某个字段并将其附加到列表中，要更新的值是通过 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 是要更新的值

更新列表中对象的字段

Update a field of an object in a list

reactjs

redux

react-redux