我在反应中使用 mobx(6.3.12) 管理状态。
但我无法观察到物体的深层变化。
这是我的消息来源。
- store
class ApiStore {
values = {
name: '',
author: '',
}
constructor() {
makeObservable(this, {
values: observable,
setValues: action
})
}
setValues(key, value) {
values[key] = value;
}
}
-
观察（不是所有工作）
store = new ApiStore();
useEffect(() => {
console.log(values);
}, [store.values]);
store = new ApiStore();
useEffect(() => {
autorun(() => console.log(store.values));
}, [])
-
状态改变
...
<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};
}
Q：
根据文档，可观察的默认选项称为.deep。
所以我想我可以自动检测深度变化
对象（通过 this.values[key] = value）。
但看来对象的参考值得改变了。
您能解释一下或者指出错误吗？
deep意味着该物体将深入observable，所以每个内部属性或内部对象/数组，基本上所有东西都会被制作observable too.
对某些变化做出实际反应observable您需要使用它的值，或者dot into it or touch it，无论你怎么称呼它。所以如果你想对此做出反应name改变然后你需要以某种方式使用store.values.name在你的组件内部。与其他领域相同。仅当您实际上显式使用这些值时，MobX 才会订阅您的组件的更改。否则，如果组件不使用任何东西，为什么要重新渲染组件呢？这只是一个额外的重新渲染。
在你的情况下，你只使用store.values，基本上只有对象本身，而不是它的字段。这就是为什么当您通过解构重新分配整个对象时，所有内容都会重新渲染。您正在使用对象 -> 对象更改 -> 组件重新渲染。
如果您没有使用所有字段，但仍想以某种方式对它们做出反应，您可以使用JSON.stringify或 MobX 方法toJS， 像那样：
useEffect(() => {
// return is important, read why below
return autorun(() => console.log(JSON.stringify(store.values)));
}, [])
并引用有关的文档autorun:
请注意，我们从效果函数中返回由 autorun 创建的处理程序。这很重要，因为它可以确保组件卸载后自动运行得到清理！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
