在 mobx 中无法观察到对象的深层变化

Question

我在 react 中使用 mobx(6.3.12) 管理状态。 但我无法观察到物体的深层变化。

这是我的来源。

1. 商店

    class ApiStore {
        values = {
            name: '',
            author: '',
        }
        constructor() {
            makeObservable(this, {
                values: observable,
                setValues: action
            })
        }
              
        setValues(key, value) {
            values[key] = value;
        }
    }

1. 观察（并非所有工作）

   store = new ApiStore();
   
   useEffect(() => {
     console.log(values);
   }, [store.values]);
   
   
   
   store = new ApiStore();
       useEffect(() => {
           autorun(() => console.log(store.values));
       }, [])
   

2. 状态变化

    ...
    <NormalTextValue
       onChange={(e) => store.setValues(id, e.target.value)}
       value={store.values[id]}/>
   
   
   

我意识到无法理解深刻的变化是原因。 可以通过取消引用访问它们来检测更改。 （例如 [store.values.name]）

所以我将其更改为以下以获得所需的结果。

   setValues(key, value) {
       this.values[key] = value;
       this.values = {...this.values};
    }

问： 根据文档，可观察的默认选项称为 .deep。 所以我想我可以自动检测到 对象（通过 this.values[key] = values）。 但似乎必须更改对象的参考值。 能否请您解释一下或指出错误？

Answer 1

deep表示对象会很深observable，所以每一个内部属性或者内部对象/数组，基本上所有东西都会变成observable。

要对某些observable 值的变化做出实际反应，您需要使用它，或者dot into it 或touch it，无论您如何称呼它。因此，如果您想对 name 更改做出反应，那么您需要在组件内部以某种方式使用 store.values.name。其他领域也一样。仅当您实际显式使用这些值时，MobX 才会订阅您的组件以进行更改。否则，如果它不使用任何东西，你为什么要重新渲染组件？这将只是一个额外的重新渲染。

在您的情况下，您只使用store.values，基本上只使用对象本身，而不是它的字段。这就是为什么当您使用解构重新分配整个对象时一切都会重新呈现的原因。您正在使用对象 -> 对象更改 -> 组件重新渲染。

如果您没有使用所有字段但仍想以某种方式对它们做出反应，例如，您可以使用 JSON.stringify 或 MobX 方法 toJS，如下所示：

    useEffect(() => {
        autorun(() => console.log(JSON.stringify(store.values)));
    }, [])