时间戳

首页 > 解决方案 > 如何在 useReducer 中更新键索引数组状态？

reactjs - 如何在 useReducer 中更新键索引数组状态？

问题描述

我的状态模型如下

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

所以 State 持有所有单位的状态，键为 unitID。所以理想情况下应该是这样的

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

现在，当我想在 reducer 中进行一些状态更新时，我该怎么做？我尝试过这样的事情，但没有奏效。我在这里查看了其他帖子，但没有一个有键索引数组的示例

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

标签： reactjsreact-reduxuse-reducer

解决方案

问题

  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
    },
  };
}

推荐阅读