我第一次在React应用程序中使用X1 M0 N1 X，但遇到了一个问题。
我使用的是从Map派生的类，我称之为Mappable：

import { immerable } from "immer";

type KeyValueOf<T, K extends {}> = keyof T;

export default class Mappable<K, V> extends Map {
  [immerable] = true;

  constructor();
  constructor(entries: readonly (readonly [K, V])[]);
  constructor(entries: readonly V[], key: KeyValueOf<V, string>);

  constructor(
    entries?: readonly (readonly [K, V])[] | readonly V[],
    key?: keyof V
  ) {
    let superEntries: Map<V[keyof V], V> | readonly (readonly [K, V])[];

    if (key) {
      superEntries = new Map(
        (entries as readonly V[]).map((entry: V) => [entry[key], entry])
      );
    } else if (entries) {
      superEntries = entries as readonly (readonly [K, V])[];
    } else {
      superEntries = new Map();
    }

    // @ts-ignore
    super(superEntries);
  }

  map = <T>(predicate: (key: K, value: V) => T): Mappable<K, T> => {
    let map: Mappable<K, T> = new Mappable();

    super.forEach((value: V, key: K) => {
      map.set(key, predicate(key, value));
    });

    return map;
  };
}

我的reducer状态包含以下Mappable的一个示例：

export interface SelectorState {
  columns: SelectorColumnData[];
  checked: Mappable<ItemId, ItemCheckedStateTree>;
}

...但似乎当我的reducer退出时--或者至少在某个时刻，很难精确定位到哪里（我甚至让setTimeout尝试调试它）--我的Mappable在状态中被强制转换回Map，因此我对Mappable的.map()调用福尔斯了。
很难确定这可能发生在哪里。
我有一个函数，其结果作为prop传递给组件：

export const columnCheckedState = (
  state: SelectorState,
  columnIndex: number
): Mappable<ItemId, CheckedState> => {
  console.log("columnCheckedState", state);
  return state.checked.map(
    (id, item: ItemCheckedStateTree) => item.checkedState
  );
};

现在，有时候state.checked是Map，有时候它是Mappable，正如我说的，不能精确定位在哪里，我怀疑它是发生在，当一个新的状态，在reducer的末端产生的时候。
有什么想法吗？我很肯定我会被要求制作一个代码沙箱或其他东西，我可能会因为各种原因而与之斗争;但我的第一站是看看是否有人知道他们的头顶可能会发生什么。
如果做不到，我们就用代码沙盒...