当状态的参数是 Map 时如何更新 React 状态？

Question

我的应用中的 React 组件的状态属于以下类型：

interface ComponentState {
    messages: Map<string, Messages[]>;
}

如何使用 setState 更新组件的状态？

我尝试了以下操作，但是它将 messages 从 Map 更改为 Object。此外，TypeScript 不会捕获以下内容。

this.setState((prevState) => ({
    messages: {
        ...prevState.messages,
        [someKeyAsString]: someValue,
    }
}));

有没有办法使用Map 作为状态属性并使用setState 以正确的方式更新它，并且也不会将参数的类型从Map 更改为Object

Answer 1

虽然在 React 中使用 Map 是可能，但这很奇怪，因为克隆它所需的代码很复杂 - 你必须将 Map 转换为一个条目数组，然后添加额外的条目，然后将其转回 Map：

this.setState((prevState) => ({
    messages: new Map([
      ...(prevState.messages.entries()),
     ['someKeyAsString', 'someValue']
    ])
}));

我强烈建议使用普通对象。