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（）函数中。根据我的理解，它并不总是完全需要，但是当我忘记添加它时，我在我自己的代码中遇到过几次这样的问题。

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

Answer 2

观察此上下文的绑定。

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

这个引用不会出现在类中，因此当您实际点击它时，可能会说出一些未定义的道具。改为：

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

应该修复它。或者更好的是，绑定构造函数中的上下文，使其不在每个渲染上重新绑定

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

然后你可以回到你的

Answer 3

我的猜测是未经初始化的@observable。这是违反直觉的，但巴贝尔并没有很好地处理这些问题。即使添加@observable me = undefined也可能有所帮助（当你在那里分配东西时看到生成的js代码。通常我会完全删除构造函数并将初始化移动到声明（即@observable me = "hello"一个没有构造函数）。然后应该工作细

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

3 个答案: