React Mobx - 商店更改后组件不更新

Question

使用 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);

Answer 1

我首先将@action 添加到您的change_me() 函数中。据我了解，它并不总是完全必需的，但是我在自己的代码中遇到过几次这样的问题，但我忘记添加了。

另外按照@mweststrate 的建议发布您的 .babelrc，因为它可以帮助其他人检查是否加载了正确的插件。

Answer 2

只需添加 makeObservable(this);在如下构造函数中

    constructor() {
       makeObservable(this);
    }

Answer 3

我的猜测是有未初始化的@observable。这是非常违反直觉的，但 Babel 不能很好地处理这些。即使添加 @observable me = undefined 可能会有所帮助（当你在那里分配东西时，请参阅生成的 js 代码。通常我会完全删除构造函数并将初始化移至声明（即 @observable me = "hello" 没有构造函数）。然后它应该可以正常工作。

Answer 4

观察 this 上下文的绑定。

<button onClick={this.on_change}>Change</button>

this 引用不会指向该类，因此当您实际单击它时，它可能会说一些类似于 no props on undefined 的内容。改为：

  <button onClick={this.on_change.bind(this)}>Change</button>

应该修复它。或者更好的是，在构造函数中绑定上下文，这样它就不会在每次渲染时重新绑定

 constructor(props) {
   super(props)
   this.on_change = this.on_change.bind(this)
 }

然后你可以回到你的