使用Mobx,在更新商店(即单击按钮)后,组件不会重新呈现.我已经安装了mobx devtools,在初始加载后没有显示任何内容,并且控制台中没有错误.我做错了什么想法?
Store.js:
import { observable } from 'mobx'; class Store { @observable me; constructor() { this.me = 'hello'; } change_me(){ this.me = 'test 1234'; } } export default Store;
layout.js:
import React from "react"; import { observer } from 'mobx-react'; @observer export default class Layout extends React.Component{ render(){ return( <div> <h1>{this.props.store.me}</h1> <button onClick={this.on_change}>Change</button> </div> ) } on_change = () => { this.props.store.change_me(); } }
index.js:
import React from "react"; import ReactDOM from "react-dom"; import Layout from "./components/Layout"; import Store from "./Store"; import DevTools,{ configureDevtool } from 'mobx-react-devtools'; // Any configurations are optional configureDevtool({ // Turn on logging changes button programmatically: logEnabled: true,// Turn off displaying conponents' updates button programmatically: updatesEnabled: false,// Log only changes of type `reaction` // (only affects top-level messages in console,not inside groups) logFilter: change => change.type === 'reaction',}); const app = document.getElementById('app'); const store = new Store(); ReactDOM.render( <div> <Layout store={store} /> <DevTools /> </div>,app);
我首先将@action添加到你的change_me()函数中.根据我的理解,它并不总是完全需要,但是当我忘记添加它时,我已经在我自己的代码中多次遇到过这样的问题.
另外将你的.babelrc发布为@mweststrate建议,因为它可以帮助其他人检查是否加载了正确的插件.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。