Reactjs React Mobx-存储更改后组件未更新

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

从“React”导入React；
从'mobx react'导入{observer}；
@观察者
导出默认类布局扩展React.Component{
render（）{
返回(
{this.props.store.me}
改变
)
}
关于变化=（）=>{
这个.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);

从“React”导入React；
从“react dom”导入react dom；
从“/components/Layout”导入布局；
从“/Store”导入存储；
从“mobx react DevTools”导入DevTools，{configureDevtool}；
//任何配置都是可选的
配置开发工具({
//以编程方式打开“记录更改”按钮：
logEnabled:true，
//以编程方式关闭显示组件的更新按钮：
UpdateEnabled:false，
//仅记录“反应”类型的更改`
//（仅影响控制台中的顶级消息，不影响组内的消息）
logFilter:change=>change.type=='reaction'，
});
const app=document.getElementById（'app'）；
常量存储=新存储（）；
ReactDOM.render(
，app）；

我首先将@action添加到change\u me（）函数中。据我所知，它并不总是完全必需的，但我在自己的代码中遇到过类似这样的问题，因为我忘记了添加它

---

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

查看此上下文的绑定

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

---

然后你可以回到你的

我的猜测是未初始化@observable。这是非常违反直觉的，但巴贝尔没有处理好这些。即使添加

@observable me=undefined

也可能会有所帮助（当您在那里赋值时，请参阅生成的js代码。通常我会完全删除构造函数，并将初始化移到声明中（即

@observable me=“hello”

一个无构造函数）。然后应该可以正常工作。

我复制粘贴了您的代码，它在我的环境中工作。

更新存储后，组件不会重新渲染。

意味着在您单击右键后？完全正确。那么它对您有效吗？还可能是什么？只是猜测一下，检查您的导入目录是否正确。导入目录？That将使整个应用程序完全无法运行，不是吗？应用程序正在运行，只是单击按钮后的更新。您阅读了吗？您可能需要将

transform decorators legacy

放在插件列表的第一位。这是一个非常错误的答案，原因有二。首先，按声明方式，on_change与此绑定，所以原始调用通过{this.on_change}是好的。然后，在{}内有.bind（）是一种反模式，会导致性能降级，不应使用。@Nopik不是真的。

on_change

不受此

约束。React autobind使用类似的方法，但仅当组件通过
createClass
声明时，而不是在使用ES6类时。@Nopik正如sultan所说，您确实需要仔细阅读另外，正如我在下面演示的，正确的模式是在构造函数中绑定。您也可以在这里阅读更多内容：
on_change
已经绑定，因为它是这样写的：
on_change=（）=>{…}
这会在实例化过程中导致绑定。有关详细信息，请参阅建议。@dpastor1）Sulthan是错误的，2）您发布的链接列出了作为方法4使用的方法，作为绑定到该方法的有效方式（只是还不在标准中，显然OP使用扩展）
  <button onClick={this.on_change.bind(this)}>Change</button>

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