如何解决mobx:更改数据时的类方法调用
例如MyObject
写入container['item'] = 10
,结果调用了myaction
方法。
class MyElement extends Component<any> {
// modifiable data
container: any = [];
// method called when data (container) is modified
myaction() {
console.log('container was modified');
console.log(this.container);
}
render() {
<MyObject container = {this.container} />
}
}
decorate(MyElement,{
container: observable
} as any)
解决方法
您可以使用reaction
例如:
container = [];
componentDidMount() {
// save disposer function to use later inside componentWillUnmount
this.reactionDisposer = reaction(
() => this.container.length,() => {
console.log('container was modified')
}
);
}
// Don't forget to dispose it when unmount
componentWillUnmount() {
this.reactionDisposer();
}
Codesandbox链接:https://codesandbox.io/s/httpsstackoverflowcomquestions63864175-kjorh?file=/src/App.js
而且,从技术上讲,您可以使用数组container['item'] = 10
来做到这一点,但我建议您不要对数组使用字符串键。如果要使用字符串键,则需要使用object或Map
。
您还可以使用其他方法来实现所需的目标:
-
何时(基本上是一次性使用反应)-https://mobx.js.org/refguide/when.html
-
或更底层的东西,例如
observe
和intercept
-https://mobx.js.org/refguide/observe.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。