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

Question

我正在尝试使用 Immutable.js 中的记录作为 Class 组件中的状态。这是代码：

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，而不是我的 class，并且没有原型，因此 set 未定义。我试图调试这个问题，发现在 React 内部，它使用 Object.assign 合并状态以进行记忆，并且在那一刻所有原型都被删除。

有什么办法我仍然可以使用 Record 作为组件的状态吗？还是我必须改用纯 JS 对象？

Answer 1

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

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

Using Immutable.js Record as Component's state

javascript

typescript

reactjs

immutable.js