Question

我试图将Immutable.js中的Record用作类组件中的State。这是代码：

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对象？

Answer 1

如您所见，我认为您不适合使用Record作为顶级状态对象。但是您可能让React状态包含一个字段，即一个Record并包含您的所有实际数据。

使用Immutable.js Record作为组件的状态

1 个答案: