时间戳

首页 > 解决方案 > Mobx 的 observable 失去了子对象的相等性

javascript - Mobx 的 observable 失去了子对象的相等性

问题描述

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

有没有合适的方法来处理这个？

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

标签： javascriptmobx

解决方案

当您调用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

推荐阅读