如何使用 useReducer 更新嵌套数组？

Question

我有这些：

export type DataItemChild = {
  id: number;
  title:string;
  checked?: boolean;
};

请注意，此处的子项可以未定义：

export type DataItems = {
  id: number;
  title:string;
  subItems?: Array<DataItemChild>;
  checked?: boolean;
};

export const initalState: StateType = {
  items: [],
  date: new Date(),
};

到目前为止，我已经弄清楚如何更新顶级对象上的数组，例如：

  case ActionKind.Checked:
    newArrayChecked = state.items.map((item) => ({
      ...item,
      checked: item.id === payload.id ? true : item.checked,
    }));
    return {
      ...state,
      items: newArrayChecked,
    };

我不知道如何更新子项？我有这个（精简）

export const reducer = (state: StateType, action: Action) => {
  const { type, payload } = action;
  let newArrayChildCheck: Array<DataItemChild> = []
  switch (type) {

    case ActionKind.UnCheckedSub:
      newArrayChildCheck = state.items.map((item) => ({
        ...item.subItems?.map((sub, index) => ({
          checked:  sub.id === payload.subItems?[index].id ? true: sub.checked
        })),
      }));
      return {
        ...state,
        items.subItems: newArrayChildCheck,
      };

    default:
      return state;
  }
};

但这给了我一个打字错误，说我的 newArrayChildCheck 不支持未定义。完全错误：

类型 '{ [x: number]: { 选中: boolean |不明确的; };长度？： 号码 |不明确的; toString?: (() => 字符串) |不明确的; toLocaleString?: (() => 字符串) |不明确的;流行？：（（）=> {检查： 布尔值 |不明确的; } |未定义）|不明确的; ... 29 更多 ...; [Symbol.unscopables]?: (() => { ...; }) |不明确的; }[]' 不是 可分配给类型“DataItemChild[]”。键入'{ [x：数字]：{ 检查：布尔值 |不明确的; };长度？：数字 |不明确的; toString?: (() => 字符串) |不明确的; toLocaleString?: (() => 字符串) |不明确的;流行？：（（）=

编辑：

@Kelvin Schoofs 回答后，我意识到我正在发送一个包含子项的整个对象。有效载荷的类型为DataItems

我根据@Kelvin Schoofs 的建议稍微修改了我的尝试：

  newArrayChildCheck = state.items.map((item) => ({
    ...item,
    subItems: item.subItems?.map((sub, index) => ({
        ...sub,
        checked: sub.id === payload.subItems[index].id ? true : sub.checked
    })),

不是[index]

但我得到了

对象可能未定义

Answer 1

您似乎错误地传播了新对象。您的 .map((item) => ...) 返回一个对象，但在其中您传播了一个（潜在的）数组，该数组只会填充数字（好吧，字符串化版本）键。您可能打算从item 复制原始字段，例如id 和title，并将映射的subItems 结果分配给subItems 字段。您在 subItems?.map 中创建的对象的同上。像这样的东西是类型正确的：

newArrayChildCheck = state.items.map((item) => ({
    ...item,
    subItems: item.subItems?.map((sub) => ({
        ...sub,
        checked: sub.id === payload.id ? true : sub.checked
    })),
}));

如果您想要 DataItems 数组的更改版本。如果你真的想返回每个 DataItemChild 并更改 checked 版本，你可以像这样使用 flatMap：

newArrayChildCheck = state.items.flatMap((item) => 
    item.subItems?.map((sub) => ({
        ...sub,
        checked: sub.id === payload.id ? true : sub.checked
    })),
);