无法用 mobx 存储中的对象替换状态

Question

我正在尝试用一个对象替换 mobx store 道具。问题是我希望它一开始是非初始化的——但是当我更新 prop（它在代码中称为协议）时，mobx 似乎没有看到 prop 和组件没有更新。

    class ExportContractStore {
        agreement: AgreementT;
    
        constructor() {
            makeAutoObservable(this);
        }
    
        setCurrentAgreement(agreement: AgreementT) {
            this.agreement = agreement;
        }
    }

如果我用空对象初始化协议，那么我会在道具更新时收到错误：

Uncaught (in promise) RangeError: Maximum call stack size exceeded

在React组件中，我想这样使用它：

export const AgreementList = observer(({ agreements }: PropsT) => {
    const agreementsList = agreements.map((agreement) => {
        const { id } = agreement.record;
        const onClick = () => {
            exportContractStore.setCurrentAgreement(agreement);
        };

        return <button>{`№ ${id}`}</button>
    });

    return <ul className='docs'>{agreementsList}</ul>;
});

export const ExportContractSection = observer(() => {
    const { initObj } = useInitContractSection();
    useEffect(() => {
        console.log(exportContractStore.agreement);
    });

    return (
        <div className='section'>
            <div className='choose-agreement'>
                <h2>Choose contract</h2>
                <AgreementList agreements={initObj.agreements} />
            </div>
            //agreement here not just boolean - I need this object many times in 
            //different components as well
            {exportContractStore.agreement ? (
                <Form className='form'>
                   ...
                </Form>
            ) : null}
        </div>
    );
});

那么，问题是在 mobx 存储中是否可以用另一个对象替换整个属性对象？

Answer 1

所以问题出在对象“协议”中，它包含递归链接对象本身的道具——从那以后，我从 mobx 收到了关于调用堆栈超出的错误。

我决定只存储一个键（协议号），然后通过这个键从数组中获取一个对象，而不是放置整个对象。这不是很舒服，但我发现这是解决问题的唯一方法。