Mobx的可观察性失去子对象相等性

编程问答 2022-06-12

问题描述

当我从包含对象的可观察对象创建一个实际上是相同对象的字段时，此属性不再是相等的对象。因此，如果我更改一个人的财产，第二个保持原状。

有没有适当的方法来解决这个问题？

import { observable } from "mobx";

const status = { id: "some-obj" };

const obj = {
  status,status2: status
};

const observableObj = observable(obj);

const isEqual = observableObj.status2 === observableObj.status;

document.body.innerHTML = `Is equal = ${isEqual}`;
console.log(observableObj);

https://codesandbox.io/s/mobx-equality-demo-5eowk

解决方法

在常规对象上调用observable时，它不会对其进行突变，但是会创建新的可观察对象。 MobX递归地对每个内部对象或值执行此操作，因此这就是observableObj.status2和observableObj.status不相等的原因。它们是从相同的“蓝图”对象创建的，但是如果可以的话，它们都是独立的副本。

原始status仍然是常规对象，并且status2成为observableObj内部的可观察对象。希望有道理。

您可以做的就是让status自己可观察，然后再将其传递到obj内，就像这样： 

const status = observable({ id: "some-obj" });

const obj = {
  status,status2: status
};

const observableObj = observable(obj);

observableObj.status2 === observableObj.status // => true

那样，Mobx不会对其进行任何操作，因为它已经是observable。

Codesandbox：https://codesandbox.io/s/httpsstackoverflowcomquestions64032286-rxj5m?file=/index.js

javascriptmobxmobxmobxmobx