如何在useReducer中更新键索引的数组状态

Question

我的状态模型如下

export interface State {
[key: string]: UnitState;
}

所以State持有所有单位的状态，键为unitID。所以它最好看起来像这个

{ 'ABC': {unitName: 'John', unitOpen: 'true'},
'XYZ': {unitName: 'Peter', unitOpen: 'false'} 
}

现在，当我想在减速器中进行一些状态更新时，我该怎么做？我试过这样的东西，但没用。我在这里查看了其他帖子，但没有一个有密钥索引数组的例子

case 'UPDATE_UNIT_NAME': {
const stateCopy = Object.assign({}, state);
const name = action.name;
stateCopy[unitId] = { ...stateCopy[unitId], unitName: name};
return {...state, stateCopy};
}

Answer 1

问题

1. 您的状态不是一个数组，而是一个对象
2. 您正在复制您的状态，但随后将更新后的状态嵌套在stateCopy属性下的下一个状态对象中，我猜这不是您想要的结果

解决方案

浅层复制状态以及正在更新的任何嵌套属性。

case 'UPDATE_UNIT_NAME': {
const { name } = action;
return {
...state, // <-- shallow copy state object
[unitId]: {
...state[unitId], // <-- shallow copy nested unit object
unitName: name // <-- update specific property
},
};
}