使用 Immutable.js 记录作为组件的状态答案

【问题标题】：Using Immutable.js Record as Component's state使用 Immutable.js 记录作为组件的状态
【发布时间】：2018-08-22 12:12:37
【问题描述】：

我正在尝试使用 Immutable.js 中的 Record 作为类组件中的状态。代码如下：

interface INetworkDisplayAreaState {
    layers: List<Layer>;
    translate: { x: number, y: number };
    scale: number;
}

const NetworkDisplayAreaStateRecord = Record<INetworkDisplayAreaState>({
    layers: List(),
    translate: { x: 0, y: 0 },
    scale: 1
});

class NetworkDisplayAreaState extends NetworkDisplayAreaStateRecord {
    constructor(state: Partial<INetworkDisplayAreaState> = {}) {
        super(state);
    }
}

export default class NetworkDisplayArea
    extends React.Component<INetworkDisplayAreaProps, NetworkDisplayAreaState> {

    constructor(props: INetworkDisplayAreaProps) {
        super(props);

        this.state = new NetworkDisplayAreaStateRecord({ layers: props.layers });
    }

    static getDerivedStateFromProps(nextProps: INetworkDisplayAreaProps, prevState: NetworkDisplayAreaState) {
        return prevState.set('layers', nextProps.layers);
    }

    // Other component methods go here.
}

刚创建组件时它工作正常，但是当第二次调用getDerivedStateFromProps 时，prevState 的类型是 Object，而不是我的类，并且没有原型，因此 set 是未定义的。我尝试调试此问题，发现在 React 内部，它使用 Object.assign 合并状态以进行记忆，此时所有原型都被删除。

有什么方法可以让我仍然使用 Record 作为组件的状态？还是我必须使用普通的 JS 对象？

【问题讨论】：

标签： javascript reactjs typescript immutable.js

【解决方案1】：

如您所见，我认为您使用 Record 作为顶级状态对象很不走运。但是你可以让 React 状态包含一个单一的字段，它是一个记录并包含你所有的实际数据。

【讨论】：

谢谢，它按预期工作。看起来有点笨拙，但在我的例子中仍然比普通的 JS 对象好。